Mesa Alta

# Mesa Alta

Create a responsive React + TypeScript + Vite + Tailwind CSS website. Use small components for navigation, hero, interactive stage, content sections and footer. Put media URLs in src/lib/assets.ts and animations in cleaned-up hooks. Do not output a giant HTML file, an iframe, or a screenshot pretending to be the website.

## Design direction
Ten rooms and three pools at the foot of a mesa in northern New Mexico, told in five numbered chapters in warm adobe browns, clay orange and night blue, set in Fraunces with Space Mono labels. A film-grain overlay drifts over everything and a clay dot cursor follows the mouse. The hero is a dusk sky with a sun and two mesa silhouettes; its second paragraph block opens on first scroll. Chapters: the water (a pool plan that draws itself, three pool cards that swap an illustration and quote on hover), the year (four seasons), the rooms (three), "A day" (a 500svh pinned stage that steps through five times of day), and a closing "stay" footer. A floating pill dock in the header tracks the current chapter.

Palette and type: --bg: #1c150c; --bg2: #241a0e; --paper: #efe3ca; --paper2: #e6d5b4; --ink: #201809; --pad: clamp(22px,5vw,84px).
Font families: Space Mono, monospace`..
Font stylesheet: https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&family=Space+Mono:wght@400;700&display=swap

## Layout and copy