The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].

# Painter Portfolio and Print Shop

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
Build an original multi-page website for [BRAND], led by fictional painter [ARTIST_NAME], whose [ARTWORK_THEME] practice is presented through a series-filtered gallery, artwork detail pages, archival print configuration, a persistent cart, and commission inquiries. Use only the invented content and six supplied generated assets.

- Audience: The site's visitors are [AUDIENCE]. The template itself is for independent painters, mixed-media artists, and illustrators who need one coherent place to exhibit originals, sell prints, and discuss commissions.
- Goal: Let visitors move naturally from visual discovery to artwork details, a configured print purchase, or a well-defined commission brief while keeping the artwork visually dominant.
- Tone: Quiet, observant, tactile, and confident. Write like an artist explaining materials and process in plain US English; avoid grand claims, sales pressure, generic inspirational copy, and references to real people or institutions.

## Stack
- Framework: Vite 5 + React 18 + TypeScript 5
- Styling: Tailwind CSS 3.4 + vanilla CSS
- Libraries: react (MIT), react-dom (MIT), vite (MIT), @vitejs/plugin-react (MIT), typescript (Apache-2.0), tailwindcss (MIT), postcss (MIT), autoprefixer (MIT), motion (MIT), lucide-react (ISC), @fontsource/fraunces (OFL-1.1), @fontsource/manrope (OFL-1.1), @fontsource/ibm-plex-mono (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Create a Vite React TypeScript project with npm scripts dev set to vite and build set to tsc -b && vite build; keep the stack fixed.
  - Set vite.config.ts base to './', build.outDir to 'dist', build.sourcemap to false, and build.rollupOptions.input to the six root files index.html, gallery.html, artwork.html, shop.html, print.html, and commissions.html.
  - Give every root HTML file the same /src/main.tsx entry. Route from window.location.pathname and URLSearchParams; artwork.html and print.html must show the first catalog item when id is missing or unknown.
  - Configure Tailwind and PostCSS in the standard Tailwind 3.4 way, scanning all root HTML files and src/**/*.{ts,tsx}. Put the exact color tokens, typography, keyframes, frame treatments, and reduced-motion overrides in src/index.css.
  - Import only local Fontsource weight files for Fraunces 400/500/600, Manrope 400/500/600/700, and IBM Plex Mono 400/500 in src/index.css.
  - Keep all variables, navigation, artist copy, series, artwork records, print records, option prices, FAQs, form choices, image paths, and links in src/content.ts. Give artworks stable ids tidal-orchard, quiet-current, field-notes, after-rain, and ochre-interval.
  - Use a shared React cart context persisted to localStorage, with a versioned cart key and graceful handling of malformed stored data. Available originals have a maximum quantity of one; prints have a maximum quantity of six.
  - Use the motion package's React entry point for interface transitions and useReducedMotion; use lucide-react icons only, with accessible labels for every icon-only control.
  - Download the six listed generated images into public/images and use relative image paths. Create ASSETS.md at the project root listing every image path, exact source URL, generation credit, font package and OFL license, and Lucide ISC license.

## Variables
- [BRAND] — Studio or shop name (default: "Mara Vale Studio"). An invented artist-studio name used in the wordmark, page title, footer, and order copy.
- [ARTIST_NAME] — Artist name (default: "Mara Vale"). A fictional person, never a real artist or public figure.
- [ARTWORK_THEME] — Artistic theme (default: "Coastal Abstractions"). A short phrase guiding series names, artist statements, and rewritten artwork stories.
- [LOCATION] — Studio location (default: "Portland, Maine"). City and state or region used in the studio introduction and footer.
- [AUDIENCE] — Primary audience (default: "Collectors and design-led homeowners"). The visitors addressed by the shop and commission copy.
- [CONTACT_EMAIL] — Contact email (default: "[email protected]"). An invented .example address for this static demonstration.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/painter-portfolio-and-print-shop in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- Paper `#F3EFE6` — Primary page background with a subtle CSS noise texture at 2 percent opacity.
- Canvas `#FFFDF8` — Image mats, forms, drawers, and alternating editorial bands.
- Forest Ink `#20372E` — Primary text, dark buttons, footer background, and strong borders.
- Charcoal `#292A27` — Body copy and artwork information where forest green would be too colorful.
- Sage `#9AA48F` — Selected filters, quiet decorative fields, and secondary illustration accents; never body text on Paper.
- Terracotta `#A94F37` — Availability accents, focus rings, small underlines, and active states with accessible contrast.
- Muted Text `#676A61` — Secondary copy and metadata on Paper or Canvas.
- Hairline `#D3CCBE` — One-pixel dividers, input borders, image outlines, and grid rules.

### Typography
- Display and artist statements: Fraunces (OFL), weights 400/500/600
- Body, navigation, buttons, and forms: Manrope (OFL), weights 400/500/600/700
- Artwork metadata, dimensions, prices, and counters: IBM Plex Mono (OFL), weights 400/500

### Layout & motion
- Spacing: Use a 12-column desktop grid, max-width 1360px, 48px desktop gutters, 24px tablet gutters, and 20px mobile gutters. Section padding is 112px desktop and 72px mobile. Hero copy uses 24px internal spacing; artwork captions sit 14px below images. Use an 8px base spacing scale and keep reading columns at 62–68 characters.
- Radius: Artwork, image mats, forms, and buttons are square with 0–2px radii; only availability badges, filter chips, and small cart-count indicators may be fully rounded. Avoid floating rounded-card compositions and heavy shadows.
- Motion: On the home hero, reveal headline lines through vertical masks over 560ms with 80ms stagger; fade the studio image from opacity 0 and scale 1.025 to 1 over 850ms, then reveal the smaller artwork inset after a 180ms delay.
- Motion: Reveal section headings and artwork cards with a 24px upward translation and opacity transition over 600ms, staggered by 70ms only on first viewport entry. Never hide content indefinitely if IntersectionObserver is unavailable.
- Motion: Open the gallery lightbox with a 180ms backdrop fade and image scale from 0.985 to 1. Next/previous changes crossfade in 140ms without moving the controls.
- Motion: Slide the cart drawer in from the right over 260ms with a 180ms overlay fade. Animate quantity totals with a subtle 120ms opacity change, not bouncing badges.
- Motion: Crossfade print frame treatments over 160ms while the image dimensions remain fixed. Filtered gallery items use a 180ms fade and immediate, stable grid reflow.
- Motion: Under prefers-reduced-motion, remove masked entrances, scaling, smooth scrolling, and stagger; render content immediately and keep state changes readable with near-instant opacity transitions.
- Imagery: Use exactly six locally hosted generated assets: one wide editorial working-studio photograph and five original abstract acrylic and oil-pastel paintings. The painter is fictional and seen from behind with no visible face. Paintings share warm ivory, sage, terracotta, charcoal, and muted cobalt with layered palette-knife texture and soft north-window light. Show painting assets straight-on and uncropped on detail pages; use intentional object-fit cropping only for cards and the hero. Frame and mat previews are CSS treatments around the same artwork, not extra images. Never add signatures, watermarks, real artworks, real likenesses, stock photos, or named-artist imitation.

## Pages & Sections
### Home (`index.html`)
1. **Shared shell, cart drawer, and footer** — Use this shell on all six pages. A 34px announcement line reads 'Archival prints · Free US shipping over $150'. Below it, a 74px header contains the text wordmark [BRAND], links Gallery to ./gallery.html, Prints to ./shop.html, Commissions to ./commissions.html, and Studio to ./index.html#studio, plus a cart button with item count. The mobile menu is an accessible full-width drop-down. The global cart drawer lists each selected artwork or print configuration with thumbnail, title, size, frame, unit price, quantity stepper, and remove action. It calculates subtotal, $14 shipping below $150, free shipping at $150 or more, and total. A 'Mock checkout' button opens an inline contact-and-shipping form with name, email, street, city, ZIP, and country; 'Place demo order' validates locally, clears the cart, and shows 'Demo order confirmed — no payment was collected.' The footer repeats navigation, [CONTACT_EMAIL], [LOCATION], and the optional [CREDIT] link.
   Layout: Announcement and header are sticky as one compact unit with a Paper background and 1px Hairline bottom border. Desktop navigation is horizontal; mobile uses Menu and X icons. The cart is a modal dialog with focus trap, Escape close, and a right-side 440px maximum-width panel that becomes full width on mobile. Footer is Forest Ink with Paper text in a three-column grid, collapsing to one column.
   Motion: Use the specified 260ms cart entrance and 180ms overlay fade; restore focus to the cart trigger on close.
2. **Hero** — Eyebrow: '[ARTWORK_THEME] · [LOCATION]'. Headline: 'Paintings for rooms that ask you to linger.' Supporting copy: '[ARTIST_NAME] builds layered fields of color from coastal walks, weathered surfaces, and the quiet geometry of remembered places.' Primary CTA 'Explore the gallery' links to ./gallery.html; secondary CTA 'Shop archival prints' links to ./shop.html. Add a small caption beneath the artwork inset: 'Tidal Orchard · acrylic and oil pastel on linen'. The studio photograph must be a dominant visual anchor, with the painter seen from behind and no close-up face.
   Layout: For the default desktop viewport, the hero fills the remaining first screen after the announcement and header. Use a 5/7-column split: left-aligned display copy with a clamp font size of 52–78px and the large studio-hero image occupying the full right height. Overlap a 34%-width tidal-orchard image on the studio image's lower-left edge with a 12px Canvas mat. On mobile, stack copy then the studio image and keep the inset inside the image bounds without horizontal overflow.
   Motion: Use the masked headline, studio fade-scale, and delayed artwork inset described in Design; disable all three under reduced motion.
3. **Selected works** — Heading: 'Selected works'. Intro: 'Original paintings and small-batch prints, connected by surface, weather, and place.' Feature Tidal Orchard, Quiet Current, and After the Rain with title, series, dimensions, and availability. Each image opens the gallery lightbox via ./gallery.html?work=<id>; each title links to ./artwork.html?id=<id>. End with 'View all five works' to ./gallery.html.
   Layout: Use an asymmetric 12-column editorial grid: Tidal Orchard spans 7 columns, Quiet Current spans 4 columns offset down 72px, and After the Rain spans 5 columns beginning at column 3. Keep natural aspect ratios and show metadata in a fine-rule row rather than overlaying text. Mobile is one column with no offsets.
   Motion: Stagger first-entry card reveals by 70ms; image hover uses a 400ms scale to 1.015 with no color overlay.
4. **Studio statement** — Set this section id to studio. Eyebrow: 'The studio'. Heading: 'A painting begins with paying attention.' Body: 'In her [LOCATION] studio, [ARTIST_NAME] works in thin washes, scraped layers, and direct oil-pastel marks. Each piece holds onto the evidence of its making. The result is an original body of [ARTWORK_THEME] work shaped by observation rather than a formula.' Include three concise material notes: 'Linen and birch panels', 'Acrylic, pigment, and oil pastel', 'Original work, carefully packed'.
   Layout: Canvas background with a 4/8 split: a sticky small section label and the studio-hero image detail on the left, a 56px Fraunces statement and three hairline-separated material notes on the right. On mobile, remove sticky positioning and stack image before statement.
   Motion: Simple first-entry reveal only; no parallax on the image.
5. **Print shop preview** — Heading: 'Bring the surface home.' Copy: 'Archival pigment prints on 310 gsm cotton rag paper, made to order with a one-inch white border.' Show Tidal Orchard, Quiet Current, and After the Rain with 'From $68', 'From $84', and 'From $96' respectively. Cards link to ./print.html?id=<id>. Add a quiet 'Paper, size, and frame guide' link to ./shop.html#materials.
   Layout: A Forest Ink band contains a 4-column intro and an 8-column three-image print row. Display each artwork in a Canvas mat with a 1px Hairline frame; prices use IBM Plex Mono. On mobile, use a horizontal snap row with 82%-width cards and visible peek of the next card.
   Motion: Cards reveal together with a short stagger; mobile snapping is native and does not autoplay.
6. **Commission callout** — Heading: 'A painting made for your space.' Copy: 'Share the wall, the light, and the colors you return to. Commissions begin at $1,800 and include two visual check-ins.' CTA 'Start a commission brief' links to ./commissions.html; secondary text link 'See available originals' links to ./gallery.html.
   Layout: Two-column closing section with a large Fraunces headline on the left and a compact copy-and-CTA block on the right, separated by a Terracotta top rule. Stack at mobile widths.
   Motion: No decorative animation beyond the standard section reveal and button hover states.

### Gallery by Series (`gallery.html`)
1. **Gallery introduction and series filters** — Eyebrow: 'Original work'. Headline: 'Color, weather, and remembered places.' Intro: 'Browse the current body of work by series. Select a painting for dimensions, availability, and the story behind its surface.' Filters are All work (5), Tidal Fields (3), and Ground Studies (2). Tidal Fields contains tidal-orchard, quiet-current, and after-rain; Ground Studies contains field-notes and ochre-interval. Read optional query parameter work=<id> and open that item's lightbox after render.
   Layout: Intro uses a 7-column measure below a 72px page top pad. Filters sit in a horizontally scrollable row on mobile and a left-aligned wrapped row on desktop. Selected filter has Forest Ink fill and Paper text; unselected filters have Hairline borders and no card containers.
   Motion: Filter changes use a 180ms fade and immediate grid reflow; update the result count with aria-live.
2. **Artwork grid and accessible lightbox** — Catalog defaults: Tidal Orchard, 30 × 24 in, original available at $2,400, prints from $68; Quiet Current, 36 × 28 in, original collected, prints from $84; After the Rain, 40 × 30 in, original available at $3,200, prints from $96; Field Notes No. 7, 24 × 30 in, original available at $1,950, no print edition; Ochre Interval, 28 × 22 in, original on hold, no print edition. Every card shows title, series, dimensions, and exact availability. Clicking a card image opens a modal lightbox with large uncropped artwork, title, dimensions, availability, current position such as '2 / 5', previous/next controls, close control, and 'View artwork details' to ./artwork.html?id=<id>. Clicking the title goes directly to the detail page.
   Layout: Use a varied but deterministic 12-column grid: horizontal works span 7 columns, vertical works span 5 columns, with 64px row gaps and alternating top offsets. Do not crop vertical paintings to masonry tiles; preserve each asset's aspect ratio. Lightbox is a full-viewport Forest Ink 96%-opacity dialog with a centered image area and a fixed control rail. Mobile grid is one column; lightbox controls remain visible below the image.
   Motion: Trap focus, support Escape and left/right arrow keys, cycle within the filtered result set, prevent background scroll, and restore focus to the originating card. Use the specified lightbox transitions.

### Artwork Detail (`artwork.html`)
1. **Artwork viewer and acquisition details** — Read id from the query string and render the matching artwork; missing or unknown ids show tidal-orchard. Display title, series, medium 'Acrylic and oil pastel on linen', exact dimensions, availability, and original price from the shared catalog. Available originals have 'Add original to cart' with quantity fixed at one. Collected work shows 'Original collected' and a print CTA when available. On-hold work shows 'Currently on hold' and 'Ask about this work' linking to ./commissions.html. Works with editions also show 'Configure a print' to ./print.html?id=<id>. Include 'Insured shipping calculated for originals before payment' and 'Seven-day return window for undamaged original work' as sample shop policies.
   Layout: Breadcrumb links back to ./gallery.html. Use a 7/5 split with the uncropped image on a Canvas mat to the left and a sticky acquisition panel to the right. Metadata uses a two-column hairline table. On mobile, stack image, title, availability, and purchase controls; remove sticky behavior.
   Motion: Crossfade only when client-side related-work navigation changes the id; never animate price or availability in a way that delays reading.
2. **Artwork story, care, and related works** — For Tidal Orchard use the heading 'An incoming tide, held in color' and copy 'Muted blue moves across the linen in broad arcs. Terracotta marks sit like small pieces of fruit along a shoreline, while scraped charcoal keeps the softness anchored.' For other items, provide a distinct two-sentence story in src/content.ts following the same observational tone. Accordions cover Materials, Original-work shipping, and Print care with concrete answers. Finish with two related works from the same series and image/title links using the same interaction rules as the gallery.
   Layout: Story occupies a 5-column reading column beside a 6-column accordion group. Related works use a two-card grid below a Hairline divider. Mobile is one column with 48px section gaps.
   Motion: Accordions animate height over 180ms and expose expanded state through aria-expanded; reduced motion opens them immediately.

### Archival Print Shop (`shop.html`)
1. **Print collection** — Eyebrow: 'Made to order'. Headline: 'Archival prints, thoughtfully framed.' Intro: 'Museum-weight cotton paper, color checked against the original, and simple solid-wood frames. Every print includes a one-inch border.' Show three products: Tidal Orchard from $68, Quiet Current from $84, and After the Rain from $96. Filters are All prints, Tidal Fields, and price Under $90; sorting choices are Featured and Price low to high. Every card links to ./print.html?id=<id>.
   Layout: Intro sits in a 6-column block. Filter and sort controls share a fine-rule toolbar above a three-column product grid with large Canvas mats, uncropped artwork, title, available sizes, and starting price. Mobile uses one column with native select sorting and large filter chips.
   Motion: Use quick opacity changes for filter results and no automatic carousels.
2. **Paper and frame guide** — Set this section id to materials. Heading: 'The surface matters.' Detail three print sizes: 12 × 16 in, 18 × 24 in, and 24 × 32 in. Explain 310 gsm cotton rag, archival pigment inks, a matte finish, and a one-inch handling border. Frame choices are Unframed +$0, Natural oak +$65, Matte black +$65, and Chalk white +$65. Include 'Frames include acrylic glazing and arrive ready to hang.' Add shipping notes: prints are made to order, unframed work ships flat or rolled by size, and tracking is included in a real connected store.
   Layout: Use a 5/7 split with a large material statement on the left and four labeled CSS frame swatches on the right. Below, three size specification columns are divided by Hairlines. Do not add extra room photographs or generic texture images.
   Motion: On hover or keyboard focus, frame swatches gain a Terracotta outline; no other decorative motion.
3. **Shop questions** — FAQ items: 'Are these open-edition prints?' answer yes, with no artificial scarcity; 'Will the print look exactly like the screen?' explain careful color checking and normal screen variation; 'Can I change a frame after ordering?' explain that the static demo stores choices only in the browser; 'What if a print arrives damaged?' promise replacement with photos in the sample policy. Include a text link 'Ask a print question' to ./commissions.html.
   Layout: Two-column section with the heading on the left and four hairline-separated accordions on the right. Stack on mobile.
   Motion: Use the standard accessible accordion behavior and 180ms height transition.

### Configure a Print (`print.html`)
1. **Live print configurator** — Read id from the query string; missing, unknown, or non-print ids show tidal-orchard. Render the selected artwork title and 'Archival pigment print on 310 gsm cotton rag'. Size prices for Tidal Orchard are $68 / $110 / $168; Quiet Current $84 / $126 / $188; After the Rain $96 / $142 / $208 for 12 × 16, 18 × 24, and 24 × 32 inches. Frames add $0 for Unframed or $65 for Natural oak, Matte black, or Chalk white. Quantity ranges from one to six. Show unit price and total updating immediately, then 'Add configured print to cart'. Persist the exact artwork id, size, frame, quantity, unit price, and total in the shared cart.
   Layout: Use a 7/5 split. The left Canvas stage displays the artwork straight-on with a one-inch-proportioned mat and a CSS frame matching the selected option; Unframed removes both outer frame and shadow but keeps the print border. The right panel contains breadcrumb, title, size radio group, four frame radio buttons with CSS swatches, quantity stepper, price breakdown, and full-width add button. On mobile, keep the preview above controls and make add-to-cart a normal in-flow button, not an overlay.
   Motion: Crossfade frame treatments over 160ms without changing the stage dimensions. On add, open the shared cart drawer and announce the addition with aria-live.
2. **Edition details and related prints** — Include accordions for Paper and ink, Frame construction, Shipping, and Returns. State that the edition is open, the print has no artificial numbering, colors may vary slightly by display, and this static site does not transmit orders. Finish with 'You may also like' showing the other two print products with starting prices and links.
   Layout: Details use a narrow reading column and accordion column, followed by a two-card related-print grid with consistent Canvas mats. Mobile stacks all content.
   Motion: Standard accordion transitions only; related products use subtle image hover zoom within their fixed mats.

### Commission a Painting (`commissions.html`)
1. **Commission introduction and process** — Eyebrow: 'Commissions'. Headline: 'Your space, translated into paint.' Intro: '[ARTIST_NAME] accepts a small number of original commissions for [AUDIENCE]. Projects begin at $1,800, with final pricing based on dimensions, materials, and shipping.' Process: 01 'Share the room' with dimensions, light, and palette; 02 'Align on direction' with a written scope and 30 percent deposit; 03 'Review the work' with two visual check-ins before final delivery. Add 'Typical completion is 8–12 weeks after scope approval' and do not show calendar dates.
   Layout: Hero uses a 6/6 split with copy on the left and studio-hero image on the right. Below, three process columns share a top Hairline and oversized Fraunces numerals, stacking on mobile. The image remains secondary to the commission heading but large enough to establish the working studio.
   Motion: Use a single first-entry reveal for each process step; no counters or simulated scheduling animation.
2. **Commission brief form** — Build a validated client-side form with name, email, location, project type (Home, Workplace, Hospitality, Other), wall width and height with inch units, preferred palette (Coastal neutrals, Earth and ochre, Deep contrast, Not sure), budget ($1,800–$3,000, $3,001–$5,000, $5,001–$8,000, $8,000+), timeline (Flexible, 2–3 months, 4–6 months), and project notes. Include optional room-photo selection with a local thumbnail preview only and a clear label that the file never leaves the browser. Submit validates required fields and numeric dimensions, then replaces the button area with 'Your brief is ready. This static demo does not transmit inquiries; email [CONTACT_EMAIL] to continue.' Include a mailto link to [CONTACT_EMAIL]. Save non-file form drafts in localStorage and offer 'Clear draft'.
   Layout: A 4-column sidebar summarizes price, timeline, deposit, and contact; the 8-column form uses two-column fields where natural and full-width notes. Inputs have Canvas backgrounds, 1px Hairline borders, 48px minimum height, visible labels, inline errors, and Terracotta focus rings. Mobile uses one column with no sticky sidebar.
   Motion: Errors appear without layout-shaking animation. The success panel fades in over 160ms and receives programmatic focus.

## Assets
- image: Download https://media.vibefather.ai/assets/4e57d05f-b135-4ee7-a63c-a0d24ab68690/studio-hero.webp to public/images/studio-hero.webp. Alt: A painter seen from behind working on an abstract canvas in a sunlit studio. Use in the home hero, studio statement, and commissions introduction. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record this credit in ASSETS.md.
- image: Download https://media.vibefather.ai/assets/4e57d05f-b135-4ee7-a63c-a0d24ab68690/tidal-orchard.webp to public/images/tidal-orchard.webp. Alt: Abstract horizontal painting with cobalt arcs, sage layers, and terracotta marks. Use for Tidal Orchard in the home inset, selected works, gallery, artwork detail, print cards, configurator, and cart. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record this credit in ASSETS.md.
- image: Download https://media.vibefather.ai/assets/4e57d05f-b135-4ee7-a63c-a0d24ab68690/quiet-current.webp to public/images/quiet-current.webp. Alt: Vertical abstract painting with flowing sage and cobalt ribbons on warm ivory. Use for Quiet Current in selected works, gallery, artwork detail, print cards, configurator, and cart. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record this credit in ASSETS.md.
- image: Download https://media.vibefather.ai/assets/4e57d05f-b135-4ee7-a63c-a0d24ab68690/field-notes.webp to public/images/field-notes.webp. Alt: Abstract painting of scraped sage blocks, terracotta dashes, and charcoal marks. Use for Field Notes No. 7 in the gallery, artwork detail, related works, and cart. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record this credit in ASSETS.md.
- image: Download https://media.vibefather.ai/assets/4e57d05f-b135-4ee7-a63c-a0d24ab68690/after-rain.webp to public/images/after-rain.webp. Alt: Vertical atmospheric painting with ivory veils, a cobalt pool, and terracotta flashes. Use for After the Rain in selected works, gallery, artwork detail, print cards, configurator, and cart. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record this credit in ASSETS.md.
- image: Download https://media.vibefather.ai/assets/4e57d05f-b135-4ee7-a63c-a0d24ab68690/ochre-interval.webp to public/images/ochre-interval.webp. Alt: Abstract painting with ochre vertical forms, a sage field, and a cobalt sweep. Use for Ochre Interval in the gallery, artwork detail, related works, and cart. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record this credit in ASSETS.md.
- icon: Install lucide-react and use Menu, X, ArrowLeft, ArrowRight, Plus, Minus, ShoppingBag, Trash2, Check, ChevronDown, and Expand with currentColor and 1.5px strokes. Do not add brand logos or an external icon font. Record Lucide's ISC license in ASSETS.md. Draw the favicon locally as the first letter of [BRAND] in Fraunces on a Paper square.
- font: Self-host Fraunces 400/500/600 through @fontsource/fraunces, Manrope 400/500/600/700 through @fontsource/manrope, and IBM Plex Mono 400/500 through @fontsource/ibm-plex-mono. Import the package weight files locally, never a font CDN, and list the packages and OFL licenses in ASSETS.md.

## Don'ts
- Do not add a backend, server code, API routes, databases, authentication, external APIs, analytics, payment collection, or forms that transmit data. Cart, drafts, previews, and the clearly labeled mock checkout must remain client-side.
- Do not hotlink images, fonts, scripts, icons, or styles. Download the six exact generated images, self-host all Fontsource files, keep every runtime asset local, and create the required ASSETS.md.
- Do not use existing artists' names, biographies, signatures, studio identities, recognizable paintings, reproductions of real artworks, or references to real exhibitions, galleries, awards, collectors, or customers.
- Do not generate or insert text, lettering, signatures, logos, watermarks, recognizable real people, celebrity likenesses, anime or game characters, branded objects, or imagery in a named artist's style.
- Do not use Unsplash, Pexels, Pixabay, Google Images, placeholder-image services, CC BY-NC or CC BY-SA assets, commercial fonts, restricted component source, or dependencies outside the allowed licenses.
- Do not change the fixed stack, exact color roles, typography, section order, or interaction model when variables change. Rewrite all default copy, series content, artist statements, product details, and alt text to suit the new values and keep everything in src/content.ts.
- Do not create bare-directory links, client-only routes, or empty detail states. Every page is a real root HTML file; internal links include the .html filename; artwork.html and print.html always fall back to their first valid item.
- Do not emit source maps, copy src into dist, exceed 20 MB in dist, use absolute deployed asset paths, or require more than npm run build for the production output.
- Do not add SEO metadata, Open Graph tags, JSON-LD, sitemaps, keyword blocks, or extra marketing sections. Use only a plain document title containing [BRAND] and the local favicon.
- Do not show dates, fake testimonials, artificial edition scarcity, unverified sales numbers, fake reviews, or unsupported claims about the artist or materials.
- Do not hide core content behind motion. Support keyboard navigation, visible focus, dialog focus trapping, accessible names, reduced motion, and zero console errors at 1440×900 and 390×844 with no horizontal overflow.
- Do not mention VibeFather anywhere in the site's visible content except the optional [CREDIT] footer link.

---
— Prompt by VibeFather · https://vibefather.ai/t/painter-portfolio-and-print-shop · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.