Vibe Code an Architect Portfolio Website

Build a one-page architecture studio 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
═══════════════════════════════════════════════════════════════
- Studio name: [STUDIO NAME]
- Principal: [FULL NAME, AIA / RIBA]
- City + studio address: [CITY, FULL ADDRESS]
- Phone: [PHONE]
- Email: [EMAIL]
- Social: Instagram + (optional) LinkedIn (open in new tab, rel="noopener")
- Studio size: small/boutique
- Specialty: residential / adaptive reuse / cultural / commercial (pick 1-2)
- Founded year: [YEAR]
- Selected awards / press: [NONE, placeholder allowed]
- Inquiry: form + email

═══════════════════════════════════════════════════════════════
BRAND
═══════════════════════════════════════════════════════════════
- Brand colors: pure white (#ffffff), near-black ink (#111111), single
 accent, deep ochre (#a87332) OR muted slate-blue (#5a7387). User picks
 one accent color. Override if user provides; derive variants for AA
 contrast.

═══════════════════════════════════════════════════════════════
DESIGN DIRECTION
═══════════════════════════════════════════════════════════════
- Editorial austere. Think Wallpaper*, Dezeen, ArchDaily. Image-led,
 type-minimal, generous gutters.
- Type pairing: high-contrast display serif for project titles (PP
 Editorial New alternative, try Cormorant Garamond, Fraunces) + clean
 sans for body and labels (Inter Tight, Söhne alternative).
- Eyebrow labels: uppercase, tracked .26em (extra editorial), thin 32px
 CSS ::before line in accent color.
- Headlines: very short and quiet ("Architecture as *quiet attention*").
 ONE italic accent in the accent color.
- Grids dominate. Asymmetry is allowed. Whitespace is the primary design
 tool.
- Icon system: 24x24 line icons, fill="none", stroke="currentColor",
 stroke-width 1.2 (extra thin for elegance), round caps. Cover sparingly:
 cube, frame, layers, scale-arrow, calendar, pin, phone, mail,
 arrow-right.
- Icon containers: NONE, icons sit directly in ink color, hover
 transitions to accent color.
- Motion: very slow scroll fade-ins (0.9s ease-out), no Ken Burns,
 no hover transforms (project cards reveal underline links on hover only).
- Cursor: standard, no custom cursors.

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

1. FIXED NAV (white translucent + backdrop blur, ink text)
 - Wordmark left (small, all-lowercase serif) | minimal anchor nav center
 | "Inquire" small ink link right
 - No CTA pill, keep it monastic

2. HERO
 - Full-bleed photo top (cover, 90vh on desktop, Unsplash search:
 "minimalist architecture interior" or "concrete house")
 - Small overlay text bottom-left in ink on translucent white pill:
 studio name + 1-sentence philosophy ("Architecture as quiet
 attention to place.")
 - NO CTA buttons in hero, let the work speak

3. PROJECTS INDEX
 - Eyebrow + headline ("Selected *work*")
 - 2-column grid of project cards (1 column mobile, NO 3-column at any
 breakpoint, keep editorial)
 - Each card: full-bleed project photo (rounded 4px, ratio 4:3), project
 name (large serif italic), year + location + typology in small
 monospace, link to anchor for the case study
 - 6 projects total
 - Hover: subtle underline animation on project name, photo NO transform

4. CASE STUDIES (3 expanded)
 - For each: alternate alignment (left-image then right-image)
 - Project number "01" / "02" / "03" in serif italic + project name +
 location + year + typology
 - Full-bleed lead photo (rounded 4px)
 - 2-paragraph project description in body type
 - 4-image detail grid below (CSS columns: 2 desktop, 1 mobile)
 - Below grid: small plan/section drawing placeholder (rounded 4px,
 ink border 1px)
 - Each case study separated by thin ink horizontal rule across page

5. PRACTICE / ABOUT
 - Two-column: text left, photo right (Unsplash: "studio interior wood"
 or "architectural model")
 - Right: small studio interior photo (rounded 4px, ratio square)
 - Left: eyebrow, headline ("Practice"), 3 paragraphs about how the
 studio works (process, materials, what we say no to)
 - Below text: 3 lists side-by-side (Awards / Publications /
 Exhibitions), short bulleted lines in small body type
 - Use typeset names, no logos

6. PEOPLE
 - Eyebrow + headline ("Studio")
 - 4 team cards in horizontal row (stack mobile)
 - Each: portrait photo (rounded 4px, ratio 4:5), name (serif), title
 (small monospace uppercase), 1-line bio
 - Real Unsplash portraits, natural, NOT staged

7. SERVICES (minimal)
 - 4-column row: Residential / Adaptive Reuse / Cultural / Master Planning
 - Each: small serif heading + 1-line description
 - No icons, no card backgrounds, just type and white space

8. PRESS
 - Thin section, borders top/bottom
 - "FEATURED IN" small uppercase label left + 5 typeset publication
 names right (italic serif mix, NO logos)
 - Each name optionally hovers to ink

9. INQUIRY
 - Two-column: text left, form right
 - Left: eyebrow, headline ("Inquire"), 1 paragraph about how to start
 a project, contact email displayed prominently
 - Right: minimal form on white, ink border (1px), zero shadows
 • Fields: name, organization (optional), email, project type (select:
 Residential / Adaptive Reuse / Cultural / Other), project location,
 budget range, timeline, project description
 • Submit ink button, full-width
 • Inline JS success message (preventDefault)

10. FOOTER (white)
 - Centered small wordmark in serif lowercase
 - Below: studio address + email + phone in small body type
 - Bottom: instagram link (text-only, "Instagram →") + copyright + small
 print "Site by [DESIGNER]" placeholder

═══════════════════════════════════════════════════════════════
TECHNICAL REQUIREMENTS
═══════════════════════════════════════════════════════════════
- Single index.html, no build step
- JSON-LD `LocalBusiness` + `Person` schema for principal
- CSS custom properties for palette at top (just 2-3 colors)
- Smooth scroll with scroll-padding-top
- Real Unsplash images via CDN with ?w=1400&q=85&auto=format&fit=crop
 for case-study images (higher resolution for architecture)
- All images loading="lazy" except hero ("eager"), decoding="async"
- Image alt text MUST describe the architecture (NOT "building" - 
 instead "Concrete cantilever over the lake, dusk")
- tel:/mailto: links; minimal use
- Responsive at 900px and 500px breakpoints
- Semantic HTML5; aria-labels on icon-only links
- Print stylesheet for case study sections (`@media print`), make them
 print beautifully on A4
- Favicon: inline SVG data URI (single geometric mark, square, triangle,
 or studio initial in serif)

═══════════════════════════════════════════════════════════════
COPY VOICE
═══════════════════════════════════════════════════════════════
Spare, considered, third-person plural ("the studio", "we"). Avoid
adjectives where possible. Specific over generic ("A 12m cantilever over
sandstone; the floor plate is one continuous slab of polished concrete" - 
not "stunning home"). Headlines short. Body copy reads like a curator wrote
it. NO sales language. Project descriptions read like museum wall labels.

═══════════════════════════════════════════════════════════════
ANTI-PATTERNS TO AVOID
═══════════════════════════════════════════════════════════════
- No emojis anywhere
- No CTAs in hero ("Let's build your dream home!")
- No fake stock photos of clean-cut architects in dramatic poses
- No real Dezeen / ArchDaily / Architect's Newspaper logos, typeset names
- No script/handwritten fonts
- No animated SVG building drawings
- No "passionate about architecture" / "vision" / "transformative" filler
- No bright accent gradients, accent color used sparingly, never in
 gradients
- No card hover-lift effects on project cards, too crowd-pleasing
- No exclamation marks anywhere


═══════════════════════════════════════════════════════════════
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 (~75-85KB), production-ready. Include JSON-LD
schema and print stylesheet. Show the file as a single code block and
briefly summarize the design decisions made.