Studio Ryo

# Studio Ryo — Brutalist Design Studio Site

## Goal
Build a production-ready brutalist design studio site called "Studio Ryo". Overall vibe: loud, confident, anti-corporate — a studio that turns down boring clients. It should look hand-crafted by a senior product designer — not like a generic template.

## Design System
- **Palette**: paper #F5F3EE base, ink #111111 text, one shock accent #FF4D00 used at full saturation; zero gradients, zero shadows
- **Typography**: oversized grotesque (Space Grotesk or Archivo), headlines 96-140px uppercase, body 16px; underlines are 3px solid
- **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** — 2px solid black bottom border, wordmark left, three text links right that invert (black bg, paper text) on hover.
2. **Hero** — full-bleed headline 'WE MAKE BRANDS IMPOSSIBLE TO IGNORE' stacked 3 lines, each line slides in from alternating sides; orange asterisk spinning slowly at the line break.
3. **Marquee strip** — 2px bordered band scrolling 'BRANDING • WEB • MOTION • STRATEGY' infinitely, reverses direction on hover.
4. **Selected work** — 4 full-width rows, each: index number, project name huge, year, tag; on hover the row fills orange and a cursor-following image preview appears.
5. **Manifesto** — short 4-sentence block set at 32px with key words highlighted in orange marker style.
6. **Services table** — literal HTML-table look with visible borders: service, deliverables, timeline; rows tint on hover.
7. **Clients** — plain text list separated by slashes, no logos — confidence move.
8. **Footer** — giant 'LET'S TALK' link taking half the viewport, email + socials in a bordered grid.

## Motion
- Headline lines slide in with GSAP stagger 80ms, ease power4.out, once on load.
- Work-row hover preview image follows cursor with 120ms lag (lerp), clipped to 320x200.
- Marquee is CSS-driven, pausable, and respects reduced-motion by becoming static.
- 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
- Custom cursor: 12px black dot that scales 3x over links and shows 'VIEW' text over work rows.
- Selection color: orange background, paper text — details sell the brutalism.

## 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.