Arcline Atelier

# Arcline — Architecture Studio Portfolio

## Goal
Build a production-ready architecture studio portfolio called "Arcline". Overall vibe: precise, monumental, quiet — buildings speak, the site whispers. It should look hand-crafted by a senior product designer — not like a generic template.

## Design System
- **Palette**: charcoal #141414 base, bone #EDEAE4 text, no accent color — hierarchy through scale and weight only
- **Typography**: neutral grotesque, display 72px light (300), labels 11px uppercase 0.12em tracking, architectural feel
- **Grid & spacing**: 12-col grid, 8px base unit. Desktop sections 112-128px vertical padding, mobile 56-64px.
- **Corners & borders**: cards 16px radius, buttons 10px, inputs 10px. 1px borders at 8-12% white (dark) or 8% black (light).
- **Shadows**: layered, soft (0 1px 2px + 0 8px 24px), never harsh.

## Page Structure
1. **Navbar** — just wordmark and 'Index' toggle that opens a full-screen project list overlay.
2. **Hero** — single full-width project photo, project name bottom-left in 72px light, thin line draws across the viewport under it.
3. **Project index** — numbered list rows (01—08): name, location, year, status; hover swaps the fixed background image with a 600ms crossfade.
4. **Featured case** — alternating full-bleed image and two-column text (concept / materials), one blueprint-style SVG floor plan that draws itself on reveal.
5. **Studio** — team photo, 3-sentence philosophy, awards list in small caps.
6. **Recognition band** — thin-bordered rows of award + year, no logos.
7. **Footer** — studio coordinates (52.3702° N, 4.8952° E), email, tiny compass icon rotating on hover.

## Motion
- Lines (rules, plan strokes) draw via stroke-dashoffset 1.2s ease when revealed.
- Background crossfades on index hover preload images to avoid flicker.
- Page transitions: content fades down 12px while the wordmark stays fixed.
- All entrances use IntersectionObserver-triggered reveals; never animate on every scroll tick.
- Respect `prefers-reduced-motion`: disable transforms, keep opacity fades under 150ms.

## Details That Matter
- Grid is sacred: 12 columns, images always span exact column boundaries.
- Image captions in 11px uppercase with an em-dash prefix — gallery-plaque style.

## Tech & Quality Bar
- Next.js App Router + TypeScript + Tailwind CSS. No UI kit — style from scratch.
- Fully responsive at 375 / 768 / 1024 / 1440px. Mobile nav becomes a full-screen overlay with staggered link reveal.
- Semantic landmarks (header/main/section/footer), WCAG AA contrast, focus-visible rings on all interactive elements.
- Optimize LCP: hero media preloaded, fonts `display: swap`, zero layout shift.