Vibe Code a Wedding Photographer Website

Build a one-page wedding photographer portfolio website as a single
self-contained HTML file (inline CSS and JS, no external dependencies except
Google Fonts and Unsplash images via their CDN).

═══════════════════════════════════════════════════════════════
BUSINESS DETAILS
═══════════════════════════════════════════════════════════════
- Photographer name: [FULL NAME]
- Based in: [CITY], available for travel
- Gear / philosophy line (1 sentence): [e.g., "Documentary, available-light,
 35mm primes"]
- Phone: [PHONE]
- Email: [EMAIL]
- Social: Instagram + Pinterest URLs (open in new tab, rel="noopener")
- Packages currency: [USD / EUR / etc.]
- Booking: inquiry form + click-to-email
- Inquiry response time: 24-48 hours

═══════════════════════════════════════════════════════════════
BRAND
═══════════════════════════════════════════════════════════════
- Brand colors: warm off-white background (#f7f3ee), deep ink (#13110f),
 single muted-rose accent (#c08374) for italic words and CTAs. Override if
 user provides hex values; derive darker variants for AA contrast.

═══════════════════════════════════════════════════════════════
DESIGN DIRECTION
═══════════════════════════════════════════════════════════════
- Editorial magazine portfolio. Image-led, type-restrained. Thin frames, deep
 whitespace, asymmetric grids.
- Type pairing: high-contrast display serif for headings (Cormorant Garamond,
 PP Editorial New alternative) + clean sans for body (Inter, Söhne
 alternative). NO script fonts.
- Eyebrow labels: uppercase, tracked .24em (extra editorial), thin 32px CSS
 ::before line in deep ink.
- Headlines: short, emotional, with ONE italic accent ("A day that *holds
 itself*"). Italic word uses muted-rose color (no gradient, keep it quiet).
- Generous gutters (96-120px desktop). Photo-dominant layouts.
- Icon system: 24x24 line icons, fill="none", stroke="currentColor",
 stroke-width 1.5 (thin for elegance), round caps. Cover at minimum: camera,
 heart-line, calendar, pin, mail, phone, star, ring, instagram-mark,
 pinterest-mark, arrow-right.
- Icon containers: minimal, no badges. Icons sit directly in body color with
 hover transitioning to muted-rose.
- Motion: slow scroll fade-ins (0.7s ease-out), subtle Ken Burns on hero,
 hover lift on gallery images (5px), no other animations. Cursor changes
 to crosshair over interactive images.

═══════════════════════════════════════════════════════════════
SECTIONS (in this exact order)
═══════════════════════════════════════════════════════════════

1. FIXED NAV (glass effect off-white translucent + backdrop blur)
 - Wordmark (photographer's full name in serif, all lowercase) left |
 anchor nav center | "Inquire" muted-rose pill CTA right
 - Mobile: hamburger to slide-in full-width menu

2. HERO
 - Full-bleed photo top (cover, 80vh on desktop, Unsplash search:
 "wedding couple sunset" or "groom bride hands")
 - Overlay text bottom-left in deep ink on translucent off-white pill:
 eyebrow with line marker, large two-line headline with italic accent
 ("Weddings that *feel like a memory* the moment they happen"), scroll
 cue ("Scroll to see the work")
 - Ken Burns very-slow zoom (15s loop)

3. PORTFOLIO GRID
 - Eyebrow + headline ("Selected *moments*")
 - CSS columns layout (column-count: 3 desktop, 2 tablet, 1 mobile) - 
 creates a natural masonry feel without JS
 - 12 placeholder Unsplash wedding photos (mix of vertical + horizontal)
 - Each photo rounded 8px, subtle shadow, hover: slight 1.02 scale + lift
 - Below grid: link "See more work →" in muted-rose

4. FEATURED WEDDINGS
 - Eyebrow + headline ("Three *days* I keep coming back to")
 - 3 vertical case-study cards (stack on mobile)
 - Each: full-bleed hero photo top, below: couple names ("Maria & Tomás"),
 location, season, "View story →" link in muted-rose
 - Subtle hover: photo zooms 1.04, link underline animates in

5. ABOUT
 - Two-column: photographer's portrait left (rounded 16px), text right
 - Right: eyebrow, headline ("I'm *[FIRST NAME]*"), 3-paragraph bio that
 reads like a real person wrote it (sister's wedding, the camera I cried
 over, where I learned light), philosophy line in italic serif
 - Below: small grid of "I shoot with" details in monospace (camera body,
 lenses, preferred light)

6. PACKAGES
 - Eyebrow + headline ("Three ways to *book me*")
 - 3-column grid of package cards (stack on mobile)
 - Each: package name (serif), price-from (serif, muted-rose), 2-line
 description, deliverables list (4-5 items as prose with check icons),
 "Inquire about this" link
 - Middle card visually elevated (subtle drop shadow + 1px ink border)
 - Below grid: 1-line note "Custom packages and destination travel
 available, let's talk"

7. PROCESS
 - 5-step timeline horizontal (stack vertical mobile)
 - Each step: large outlined numeral (01-05) in muted-rose serif, step
 title, 1-sentence description
 - Steps: Inquiry → Consultation → Engagement session → Wedding day →
 Delivery
 - Thin ink connector line between steps on desktop

8. TESTIMONIALS
 - 3 quote cards in grid
 - Each: oversized opening quotation mark in muted ink, quote body
 (specific to a moment from the day, first look, vows, last dance - 
 varied lengths), separator, gradient-circle initials avatar + couple
 names + location + year ("Maria & Tomás, Lisbon, 2024")
 - NO photos of fake clients

9. INSTAGRAM STRIP
 - "ON INSTAGRAM" label left + 8-image Unsplash grid right (wedding
 details, getting ready, ceremony moments)
 - Hover: subtle desaturate to color shift
 - Real Instagram icon link at end of strip

10. INQUIRY FORM
 - Two-column: pitch left, form right
 - Left: eyebrow, headline ("Let's *make something* you'll keep"), short
 paragraph about response time + how the process starts
 - Right: minimal form on off-white with ink border (1px)
 • Fields: partner 1 name, partner 2 name, email, wedding date (or
 "not set"), venue or location, guest count (select: <50, 50-100,
 100-200, 200+), package interest (select), message (textarea)
 • Honeypot field (visually hidden)
 • Submit muted-rose button, full-width
 • Inline JS success message (preventDefault)

11. FAQ
 - 6 collapsible <details>: "Do you travel?", "How many photos do we
 get?", "When will we see the photos?", "What if it rains?", "Do you
 shoot film or digital?", "Do you have insurance?"
 - "+" icon rotates 45° to "×" on open

12. FOOTER (cream)
 - Centered wordmark (large serif, all lowercase)
 - Italic serif tagline below (NOT handwritten)
 - Social row: minimal real SVG icons (only platforms user provides) - 
 Instagram + Pinterest
 - Bottom legal: "Available for travel worldwide" + copyright + small
 print "Site by [DESIGNER]" placeholder

═══════════════════════════════════════════════════════════════
TECHNICAL REQUIREMENTS
═══════════════════════════════════════════════════════════════
- Single index.html, no build step
- JSON-LD `ProfessionalService` + `Person` schema in <head> with name,
 jobTitle: "Photographer", knowsAbout: ["weddings", "portraits"], image
- CSS custom properties for palette at top
- Smooth scroll with scroll-padding-top
- Real Unsplash images via CDN with ?w=1200&q=80&auto=format&fit=crop for
 hero/portfolio, ?w=600 for thumbnails
- Use <picture> with WebP source + JPG fallback on hero + portfolio images
- All images loading="lazy" except hero ("eager"), decoding="async"
- Image alt text MUST describe the photographic moment specifically (NOT
 "wedding photo", instead "First kiss at the altar, golden hour")
- tel:/mailto: links throughout; mailto with prefilled subject
- Responsive at 900px and 500px breakpoints
- Semantic HTML5; aria-labels on icon-only links
- Favicon: inline SVG data URI (camera or ring mark)

═══════════════════════════════════════════════════════════════
COPY VOICE
═══════════════════════════════════════════════════════════════
First-person, intimate, observational. The photographer is writing themselves.
Specific over generic ("The look between you when no one's watching", not
"I capture love"). Short sentences. Headlines short, with ONE italic word.
Body copy avoids cliches ("magical day", "fairytale wedding"), uses sensory
specifics instead. Testimonials should feel like real reviews, specific
moments from the day, varied lengths.

═══════════════════════════════════════════════════════════════
ANTI-PATTERNS TO AVOID
═══════════════════════════════════════════════════════════════
- No emojis (including hearts, rings, cameras) anywhere
- No script/handwritten fonts (no Caveat, no Allura)
- No "capture your special day", "fairytale", "magical" filler
- No animated heart cursors or floating particles
- No fake stock photos of generic models in wedding attire
- No "Voted Best Photographer" badge graphics, use typeset press names
- No bouncy bridal-magazine-style pinks; muted-rose only
- No exclamation marks in copy
- No client photos in testimonials (initials avatars only)


═══════════════════════════════════════════════════════════════
SEO & DISCOVERABILITY
═══════════════════════════════════════════════════════════════
Implement all of the following so the page ships production-ready for search
engines and social sharing. This is not optional; treat it as part of the
build, not an afterthought.

DO NOT INVENT DATA: never fabricate business names, addresses, phone or email, license or certification numbers, coordinates, prices, reviews or ratings, team members, photos, press mentions, or results and stats. If a detail is not provided, leave a clearly labeled {{TODO: ...}} placeholder — never a plausible-looking fake. Any form must POST to a real endpoint (Formspree, Web3Forms, Basin, or similar) or fall back to a mailto:/tel: link — never show a fake "success" message with no backend. Wrap every motion effect in @media (prefers-reduced-motion: reduce), and make sure any accent color used for text, links, or prices meets WCAG 2.2 AA contrast against its background.

1. TITLE TAG & META DESCRIPTION
   - <title> tag: "[Business Name] - [Primary Service] in [City]" (under 60 chars)
   - <meta name="description"> 150-160 chars, include the city/area, primary
     service, and a call to action (e.g., "Book online" / "Call now")
   - <meta name="robots" content="index, follow">

2. OPEN GRAPH & TWITTER CARDS
   - og:title, og:description, og:image (hero image), og:url, og:type=website
   - twitter:card=summary_large_image, twitter:title, twitter:description,
     twitter:image
   - Place all OG/Twitter meta in <head>

3. STRUCTURED DATA (JSON-LD)
   - Insert a <script type="application/ld+json"> block in <head> with
     @type: "ProfessionalService" schema
   - Include: name, description, url, telephone, email, address
     (streetAddress, addressLocality, addressRegion, postalCode,
     addressCountry), image. Add geo, openingHoursSpecification, and priceRange ONLY when the user supplied real values — never invent them; and do NOT output aggregateRating or Review markup unless the user provides real, verifiable reviews (fabricated ratings violate Google's structured-data spam policy)
   - Add BreadcrumbList schema: Home > [Category] > [Business Name]
   - If the page has a FAQ section, add FAQPage schema with every Q&A pair

4. HEADING HIERARCHY FOR SEO
   - Exactly ONE <h1> per page — use the real, human headline the design calls for; put keywords in the <title> and meta, not the visible H1
   - Logical H2 > H3 nesting for every section; never skip a level
   - Section headings should include secondary keywords naturally
     (keep the section's real, human label; put keywords in the title and meta, not stuffed into headings)

5. IMAGE SEO
   - Every <img> must have a descriptive alt attribute that includes
     relevant keywords (NOT just "image1.jpg")
   - Format: alt="[what the image shows] - [Business Name] in [City]"
   - Use the client's own images, or neutral solid/gradient placeholders with a visible "replace with your photo" note — never hardcode Unsplash photo IDs (they often resolve to the wrong or trademarked image). Always set width + height (or aspect-ratio) to prevent layout shift

6. LOCAL SEO SIGNALS
   - Include full NAP (Name, Address, Phone) in the footer, matching the
     schema data exactly
   - Add a link to Google Maps with the business address
   - Use location-specific keywords in at least 3 section headings
   - If the page has testimonials, include the reviewer's city/area

7. TECHNICAL SEO
   - Canonical tag: <link rel="canonical" href="[PAGE URL]">
   - Language: <html lang="en">
   - Charset: <meta charset="UTF-8"> + viewport meta (already required)
   - All internal anchor links use descriptive text (not "click here")
   - Loading performance: critical CSS inline, fonts via display=swap,
     hero image eager, everything else lazy
   - Keep the CSS and JS readable and editable — do NOT minify (this file is meant to be customized by the owner)

8. CONTENT SEO SIGNALS
   - Write real, useful body copy (not just headings and bullet points).
     Each major section should have at least one paragraph of 2-3 sentences
     that describes the offering in natural language a search engine can parse.
   - Use the primary keyword once or twice where it reads naturally; keep the rest in the title tag and meta description, never stuffed into copy.
   - Include a clear call-to-action with anchor text that includes the
     service keyword (e.g., "Book your appointment" not "Click here").

═══════════════════════════════════════════════════════════════
DELIVERABLE
═══════════════════════════════════════════════════════════════
One polished HTML file (~70-80KB), production-ready, that I can open in a
browser and immediately deploy. Show the file as a single code block and
briefly summarize the design decisions made.