Initial commit

IMPLEMENTATION.md

@@ -0,0 +1,43 @@
+# Implementation Summary
+
+## Tech Stack
+- **Vite 6** + Vanilla HTML/CSS/JS (no framework)
+- **Archivo** (Google Fonts, expanded width, weight 900) for headlines
+- **Inter** (Google Fonts, weight 400) for body text
+
+## Project Structure
+```
+├── index.html              # Single page with all 5 screens
+├── package.json
+├── vite.config.js
+├── public/
+├── src/
+│   ├── main.js             # Scroll reveal, smooth scroll, header scroll
+│   ├── style.css            # Master @import file
+│   ├── css/
+│   │   ├── reset.css        # Modern CSS reset
+│   │   ├── tokens.css       # Design tokens (colors, type, spacing, grid)
+│   │   ├── base.css         # Typography classes (.h1, .h2, .h3)
+│   │   ├── grid.css         # 12-col grid + utilities
+│   │   ├── components.css   # Buttons, annotations, hairlines
+│   │   ├── header.css       # Sticky header
+│   │   ├── hero.css         # Screen 1
+│   │   ├── manifest.css     # Screen 2
+│   │   ├── journal.css      # Screen 3
+│   │   ├── cases.css        # Screen 4
+│   │   ├── services.css     # Screen 5 (accordion)
+│   │   ├── footer.css
+│   │   └── animations.css   # Scroll-driven + IntersectionObserver fallback
+│   └── assets/
+```
+
+## Running
+- `npm run dev` — development server with HMR
+- `npm run build` — production build to `dist/`
+- `npm run preview` — preview production build
+
+## Design Decisions
+- Native `<details name="accordion">` for one-at-a-time accordion (zero JS)
+- CSS `animation-timeline: view()` with IntersectionObserver fallback
+- Colored placeholder blocks instead of images (swap with `<img>` later)
+- BEM-lite class naming