bmad-planning-complete

.next/app-build-manifest.json

@@ -30,6 +30,11 @@
       "static/chunks/webpack.js",
       "static/chunks/main-app.js",
       "static/chunks/app/crew/page.js"
+    ],
+    "/_not-found/page": [
+      "static/chunks/webpack.js",
+      "static/chunks/main-app.js",
+      "static/chunks/app/_not-found/page.js"
     ]
   }
 }

.next/server/app-paths-manifest.json

@@ -1,3 +1,7 @@
 {
-  "/page": "app/page.js"
+  "/_not-found/page": "app/_not-found/page.js",
+  "/icon.svg/route": "app/icon.svg/route.js",
+  "/api/auth/[...nextauth]/route": "app/api/auth/[...nextauth]/route.js",
+  "/page": "app/page.js",
+  "/projects/page": "app/projects/page.js"
 }

.next/server/app/page.js

@@ -1076,7 +1076,7 @@ module.exports = require("worker_threads");
 var __webpack_require__ = require("../webpack-runtime.js");
 __webpack_require__.C(exports);
 var __webpack_exec__ = (moduleId) => (__webpack_require__(__webpack_require__.s = moduleId))
-var __webpack_exports__ = __webpack_require__.X(0, ["vendor-chunks/@opentelemetry","vendor-chunks/@sentry","vendor-chunks/next","vendor-chunks/@prisma","vendor-chunks/semver","vendor-chunks/color-convert","vendor-chunks/is-core-module","vendor-chunks/forwarded-parse","vendor-chunks/color-name","vendor-chunks/ansi-styles","vendor-chunks/stacktrace-parser","vendor-chunks/shimmer","vendor-chunks/supports-color","vendor-chunks/function-bind","vendor-chunks/path-parse","vendor-chunks/balanced-match","vendor-chunks/@swc","vendor-chunks/has-flag","vendor-chunks/hasown","vendor-chunks/@tsparticles","vendor-chunks/framer-motion","vendor-chunks/motion-dom","vendor-chunks/@babel","vendor-chunks/motion-utils","vendor-chunks/@radix-ui","vendor-chunks/next-auth","vendor-chunks/@tabler","vendor-chunks/tailwind-merge","vendor-chunks/next-themes","vendor-chunks/lenis","vendor-chunks/clsx","vendor-chunks/class-variance-authority"], () => (__webpack_exec__("(rsc)/./node_modules/next/dist/build/webpack/loaders/next-app-loader/index.js?name=app%2Fpage&page=%2Fpage&appPaths=%2Fpage&pagePath=private-next-app-dir%2Fpage.tsx&appDir=%2Fhome%2FNicholai%2FDocuments%2FDev%2Fbiohazard-vfx-2%2Fsrc%2Fapp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=mdx&rootDir=%2Fhome%2FNicholai%2FDocuments%2FDev%2Fbiohazard-vfx-2&isDev=true&tsconfigPath=tsconfig.json&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D&isGlobalNotFoundEnabled=!")));
+var __webpack_exports__ = __webpack_require__.X(0, ["vendor-chunks/@opentelemetry","vendor-chunks/next","vendor-chunks/@sentry","vendor-chunks/@prisma","vendor-chunks/semver","vendor-chunks/color-convert","vendor-chunks/is-core-module","vendor-chunks/forwarded-parse","vendor-chunks/color-name","vendor-chunks/ansi-styles","vendor-chunks/stacktrace-parser","vendor-chunks/shimmer","vendor-chunks/supports-color","vendor-chunks/function-bind","vendor-chunks/path-parse","vendor-chunks/balanced-match","vendor-chunks/@swc","vendor-chunks/has-flag","vendor-chunks/hasown","vendor-chunks/next-auth","vendor-chunks/@babel","vendor-chunks/framer-motion","vendor-chunks/motion-dom","vendor-chunks/@radix-ui","vendor-chunks/tailwind-merge","vendor-chunks/motion-utils","vendor-chunks/next-themes","vendor-chunks/class-variance-authority","vendor-chunks/clsx","vendor-chunks/@tsparticles","vendor-chunks/@tabler","vendor-chunks/lenis"], () => (__webpack_exec__("(rsc)/./node_modules/next/dist/build/webpack/loaders/next-app-loader/index.js?name=app%2Fpage&page=%2Fpage&appPaths=%2Fpage&pagePath=private-next-app-dir%2Fpage.tsx&appDir=%2Fhome%2FNicholai%2FDocuments%2FDev%2Fbiohazard-vfx-2%2Fsrc%2Fapp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=mdx&rootDir=%2Fhome%2FNicholai%2FDocuments%2FDev%2Fbiohazard-vfx-2&isDev=true&tsconfigPath=tsconfig.json&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D&isGlobalNotFoundEnabled=!")));
 module.exports = __webpack_exports__;
 
 })();

.next/server/instrumentation.js

@@ -418,7 +418,7 @@ module.exports = require("worker_threads");
 var __webpack_require__ = require("./webpack-runtime.js");
 __webpack_require__.C(exports);
 var __webpack_exec__ = (moduleId) => (__webpack_require__(__webpack_require__.s = moduleId))
-var __webpack_exports__ = __webpack_require__.X(0, ["vendor-chunks/@opentelemetry","vendor-chunks/@sentry","vendor-chunks/next","vendor-chunks/@prisma","vendor-chunks/semver","vendor-chunks/color-convert","vendor-chunks/is-core-module","vendor-chunks/forwarded-parse","vendor-chunks/color-name","vendor-chunks/ansi-styles","vendor-chunks/stacktrace-parser","vendor-chunks/shimmer","vendor-chunks/supports-color","vendor-chunks/function-bind","vendor-chunks/path-parse","vendor-chunks/balanced-match","vendor-chunks/@swc","vendor-chunks/has-flag","vendor-chunks/hasown"], () => (__webpack_exec__("(instrument)/./src/instrumentation.ts")));
+var __webpack_exports__ = __webpack_require__.X(0, ["vendor-chunks/@opentelemetry","vendor-chunks/next","vendor-chunks/@sentry","vendor-chunks/@prisma","vendor-chunks/semver","vendor-chunks/color-convert","vendor-chunks/is-core-module","vendor-chunks/forwarded-parse","vendor-chunks/color-name","vendor-chunks/ansi-styles","vendor-chunks/stacktrace-parser","vendor-chunks/shimmer","vendor-chunks/supports-color","vendor-chunks/function-bind","vendor-chunks/path-parse","vendor-chunks/balanced-match","vendor-chunks/@swc","vendor-chunks/has-flag","vendor-chunks/hasown"], () => (__webpack_exec__("(instrument)/./src/instrumentation.ts")));
 module.exports = __webpack_exports__;
 
 })();

.next/static/webpack/c90f0d07acc26f85.webpack.hot-update.json

@@ -0,0 +1 @@
+{"c":["webpack"],"r":[],"m":[]}

.next/static/webpack/webpack.c90f0d07acc26f85.hot-update.js

@@ -0,0 +1,12 @@
+"use strict";
+self["webpackHotUpdate_N_E"]("webpack",{},
+/******/ function(__webpack_require__) { // webpackRuntimeModules
+/******/ /* webpack/runtime/getFullHash */
+/******/ (() => {
+/******/ 	__webpack_require__.h = () => ("d104ab89ef21f863")
+/******/ })();
+/******/ 
+/******/ }
+)
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJpZ25vcmVMaXN0IjpbMF0sIm1hcHBpbmdzIjoiQUFBQSIsInNvdXJjZXMiOlsid2VicGFjay1pbnRlcm5hbDovL25leHRqcy93ZWJwYWNrLmpzIl0sInNvdXJjZXNDb250ZW50IjpbIi8vIFRoaXMgc291cmNlIHdhcyBnZW5lcmF0ZWQgYnkgTmV4dC5qcyBiYXNlZCBvZmYgb2YgdGhlIGdlbmVyYXRlZCBXZWJwYWNrIHJ1bnRpbWUuXG4vLyBUaGUgbWFwcGluZ3MgYXJlIGluY29ycmVjdC5cbi8vIFRvIGdldCB0aGUgY29ycmVjdCBsaW5lL2NvbHVtbiBtYXBwaW5ncywgdHVybiBvZmYgc291cmNlbWFwcyBpbiB5b3VyIGRlYnVnZ2VyLlxuXG5zZWxmW1wid2VicGFja0hvdFVwZGF0ZV9OX0VcIl0oXCJ3ZWJwYWNrXCIse30sXG4vKioqKioqLyBmdW5jdGlvbihfX3dlYnBhY2tfcmVxdWlyZV9fKSB7IC8vIHdlYnBhY2tSdW50aW1lTW9kdWxlc1xuLyoqKioqKi8gLyogd2VicGFjay9ydW50aW1lL2dldEZ1bGxIYXNoICovXG4vKioqKioqLyAoKCkgPT4ge1xuLyoqKioqKi8gXHRfX3dlYnBhY2tfcmVxdWlyZV9fLmggPSAoKSA9PiAoXCJkMTA0YWI4OWVmMjFmODYzXCIpXG4vKioqKioqLyB9KSgpO1xuLyoqKioqKi8gXG4vKioqKioqLyB9XG4pIl19
+;

docs/architecture.md

@@ -0,0 +1,848 @@
+# Biohazard VFX Architecture Document
+
+## Introduction
+
+This document outlines the overall project architecture for Biohazard VFX, including backend systems, shared services, and non-UI specific concerns. Its primary goal is to serve as the guiding architectural blueprint for AI-driven development, ensuring consistency and adherence to chosen patterns and technologies.
+
+**Relationship to Frontend Architecture:**
+If the project includes a significant user interface, a separate Frontend Architecture Document will detail the frontend-specific design and MUST be used in conjunction with this document. Core technology stack choices documented herein (see "Tech Stack") are definitive for the entire project, including any frontend components.
+
+### Starter Template or Existing Project
+
+The Biohazard VFX project is built on a Next.js starter template with an established codebase. The architecture builds on the existing foundation with:
+
+- Next.js 15 with App Router as the foundational framework
+- Prisma ORM with SQLite for database management
+- NextAuth.js for authentication
+- Tailwind CSS for styling
+- Component-based architecture with reusable elements
+
+The existing project structure provides a solid foundation for the architecture decisions outlined in this document.
+
+### Change Log
+
+| Date | Version | Description | Author |
+|------|---------|-------------|---------|
+| 2025-09-24 | 1.0 | Initial architecture document | Winston, Architect |
+
+## High Level Architecture
+
+### Technical Summary
+
+The Biohazard VFX system follows a Next.js-based monolithic architecture with a modular component structure. Key components include a content management system, authentication layer, project portfolio, blog engine, and rich media handling. The primary technology choices center around the Next.js ecosystem with Prisma ORM, SQLite database, and Tailwind CSS. The architecture follows modern web application patterns with server-side rendering, client-side interactions, and responsive design. This architecture supports the PRD goals of creating a visually impressive portfolio site for showcasing VFX work.
+
+### High Level Overview
+
+The architecture follows a modular monolith pattern using Next.js with the App Router. The repository follows a monorepo structure with clear separation of concerns. The service architecture is a single Next.js application that handles both static content delivery and dynamic content management through the admin interface. The primary user interaction flow involves visitors browsing the portfolio and blog content, with authenticated users able to access the admin dashboard for content management. Key architectural decisions include using SQLite for simplicity and portability, NextAuth for secure authentication, and Prisma for type-safe database access.
+
+### High Level Project Diagram
+
+```mermaid
+graph TB
+    subgraph "Biohazard VFX Application"
+        A[Next.js App Router]
+        B[Pages & Layouts]
+        C[API Routes]
+        D[Components]
+        E[Hooks & Utils]
+    end
+    
+    subgraph "Authentication & Authorization"
+        F[NextAuth.js]
+        G[Prisma Adapter]
+        H[Credentials Provider]
+    end
+    
+    subgraph "Database"
+        I[SQLite Database]
+        J[Prisma ORM]
+    end
+    
+    subgraph "Content Management"
+        K[Admin Dashboard]
+        L[Content Forms]
+    end
+    
+    subgraph "External Services"
+        M[Image Optimization]
+        N[Video Streaming]
+    end
+    
+    A --> B
+    A --> C
+    A --> D
+    A --> E
+    
+    A --> F
+    F --> G
+    G --> I
+    J --> I
+    
+    C --> K
+    K --> L
+    D --> M
+    D --> N
+    
+    I <--> J
+    F --> H
+```
+
+### Architectural and Design Patterns
+
+- **Modular Monolith:** Using a single Next.js application with clear separation of concerns - _Rationale:_ Balances simplicity for current scale with maintainability and performance optimization through Next.js features
+- **Component-Based Architecture:** Reusable and composable UI elements - _Rationale:_ Enables consistent user experience and faster development with maintainable codebase
+- **Server-Side Rendering (SSR):** Next.js App Router for SEO and performance - _Rationale:_ Critical for portfolio site to ensure content is indexable and loads quickly
+- **API Routes:** Next.js API routes for backend functionality - _Rationale:_ Provides server-side processing without external API service dependencies
+- **Repository Pattern:** Prisma ORM abstracting database access - _Rationale:_ Enables type-safe database operations and simplifies data access logic
+
+## Tech Stack
+
+### Cloud Infrastructure
+
+- **Provider:** Self-hosted / Vercel
+- **Key Services:** Next.js Runtime, Static Asset Delivery, Serverless Functions
+- **Deployment Regions:** Global CDN with edge computing capabilities
+
+### Technology Stack Table
+
+| Category | Technology | Version | Purpose | Rationale |
+|----------|------------|---------|---------|-----------|
+| **Framework** | Next.js | 15.4.6 | Full-stack React framework | SSR, SSG, API routes, excellent performance and SEO |
+| **Language** | TypeScript | 5.9.2 | Primary development language | Strong typing, scalability, maintainability |
+| **Runtime** | Node.js | 20.x LTS | JavaScript runtime environment | Compatibility with Next.js and ecosystem |
+| **Database** | SQLite | 3.x | Primary database | Lightweight, portable, zero-configuration |
+| **ORM** | Prisma | 6.13.0 | Database ORM and migration tool | Type-safe queries, auto-generated client |
+| **Authentication** | NextAuth.js | 4.24.11 | Authentication system | Flexible providers, secure sessions |
+| **Styling** | Tailwind CSS | 3.4.17 | Utility-first CSS framework | Rapid UI development, consistent styling |
+| **UI Components** | Custom Component Library | - | Reusable UI elements | Consistent UX, maintainable interface |
+| **Animation** | Framer Motion | 12.23.12 | Animation library | Smooth, performant animations |
+| **Icons** | Lucide React, Tabler Icons | 0.542.0, 3.34.1 | Icon components | Lightweight, consistent icon set |
+| **Forms** | React Hook Form | 7.62.0 | Form management | Efficient form handling with validation |
+| **Validation** | Zod | 4.0.15 | Schema validation | TypeScript integration, runtime validation |
+| **Testing** | Vitest, React Testing Library | - | Testing framework | Unit and integration testing |
+| **Linting** | ESLint | 9.32.0 | Code linting | Code quality and consistency |
+| **Formatting** | Prettier | - | Code formatting | Consistent code style |
+| **Package Manager** | npm/yarn | - | Dependency management | Standard Node.js ecosystem tooling |
+
+## Data Models
+
+### User
+
+**Purpose:** Represents authenticated users with roles for access control
+
+**Key Attributes:**
+- id: String - Unique identifier for the user
+- email: String - User's email address, unique
+- name: String - User's display name
+- password: String - Hashed password
+- role: Role - User's permission level (ADMIN, EDITOR)
+- avatar: String? - Optional profile image URL
+- createdAt: DateTime - Account creation timestamp
+- updatedAt: DateTime - Last modification timestamp
+
+**Relationships:**
+- One-to-many with BlogPost (author)
+- One-to-many with Account (user accounts)
+- One-to-many with Session (user sessions)
+
+### Project
+
+**Purpose:** Represents portfolio items with before/after VFX work
+
+**Key Attributes:**
+- id: String - Unique identifier for the project
+- title: String - Project title
+- description: String? - Detailed description of the project
+- thumbnail: String - URL to thumbnail image
+- size: Size - Project size classification (BIG, SMALL)
+- embed: String? - Embedded media URL
+- video: String? - Project video URL
+- credits: String - Project credits information
+- info: String - Additional project information
+- category: String? - Project category
+- tags: String? - Comma-separated tags
+- featured: Boolean - Whether project is featured
+- published: Boolean - Whether project is published
+- publishedAt: DateTime? - Publishing timestamp
+- createdAt: DateTime - Creation timestamp
+- updatedAt: DateTime - Last modification timestamp
+
+**Relationships:**
+- No direct relationships with other models
+
+### BlogPost
+
+**Purpose:** Represents blog articles published on the platform
+
+**Key Attributes:**
+- id: String - Unique identifier for the blog post
+- title: String - Blog post title
+- slug: String - URL-friendly identifier, unique
+- content: String - Blog post content in markdown
+- excerpt: String? - Brief summary of the post
+- featuredImage: String? - URL to featured image
+- category: String? - Blog category
+- tags: String? - Comma-separated tags
+- published: Boolean - Whether post is published
+- publishedAt: DateTime? - Publishing timestamp
+- authorId: String - Reference to author user
+- createdAt: DateTime - Creation timestamp
+- updatedAt: DateTime - Last modification timestamp
+
+**Relationships:**
+- Many-to-one with User (author)
+
+### TeamMember
+
+**Purpose:** Represents team members in the VFX studio
+
+**Key Attributes:**
+- id: String - Unique identifier for the team member
+- name: String - Team member's name
+- title: String - Professional title
+- quote: String? - Personal quote or bio
+- image: String - URL to team member image
+- instagram: String? - Instagram handle
+- order: Int - Display order
+- createdAt: DateTime - Creation timestamp
+- updatedAt: DateTime - Last modification timestamp
+
+**Relationships:**
+- No direct relationships with other models
+
+### FAQ
+
+**Purpose:** Frequently asked questions for the website visitors
+
+**Key Attributes:**
+- id: String - Unique identifier for the FAQ
+- question: String - The question text
+- answer: String - The answer text
+- order: Int - Display order
+- published: Boolean - Whether FAQ is published
+- createdAt: DateTime - Creation timestamp
+- updatedAt: DateTime - Last modification timestamp
+
+**Relationships:**
+- No direct relationships with other models
+
+### SiteAsset
+
+**Purpose:** Site-wide media assets controllable from admin
+
+**Key Attributes:**
+- id: String - Unique identifier for the asset
+- key: String - Unique key for referencing (e.g. "home.hero.image")
+- label: String - Human-readable name
+- type: AssetType - Type of asset (IMAGE, VIDEO)
+- url: String - Asset URL
+- alt: String? - Alt text for accessibility
+- createdAt: DateTime - Creation timestamp
+- updatedAt: DateTime - Last modification timestamp
+
+**Relationships:**
+- No direct relationships with other models
+
+## Components
+
+### App Component
+
+**Responsibility:** Entry point for the Next.js application with layout and routing management
+
+**Key Interfaces:**
+- Root layout with metadata
+- Global styling and font loading
+- Page routing through App Router
+
+**Dependencies:** Next.js, Providers, Navigation, Footer
+
+**Technology Stack:** Next.js App Router, React, Tailwind CSS
+
+### Providers Component
+
+**Responsibility:** Manages application-wide providers and contexts
+
+**Key Interfaces:**
+- SessionProvider for authentication state
+- ThemeProvider for dark/light mode
+- MotionConfig for animations
+- LoadingProvider for loading states
+- Toaster for notifications
+
+**Dependencies:** NextAuth.js, next-themes, framer-motion, custom providers
+
+**Technology Stack:** React Context API, NextAuth.js, framer-motion
+
+### Authentication Layer
+
+**Responsibility:** Handles user authentication and authorization
+
+**Key Interfaces:**
+- API routes for NextAuth
+- Session management
+- Role-based access control
+
+**Dependencies:** NextAuth.js, Prisma, bcrypt
+
+**Technology Stack:** NextAuth.js, Prisma ORM, bcryptjs
+
+### Content Management System
+
+**Responsibility:** Admin dashboard for managing all content types
+
+**Key Interfaces:**
+- Project management interface
+- Blog post editor
+- Team member management
+- FAQ editor
+- Site asset management
+
+**Dependencies:** Prisma, React Hook Form, Zod
+
+**Technology Stack:** Next.js API routes, Prisma ORM, React Hook Form, Zod
+
+### UI Components Library
+
+**Responsibility:** Reusable UI elements across the application
+
+**Key Interfaces:**
+- Button components with various styles
+- Card components for content display
+- Form components with validation
+- Motion components for animations
+- Custom UI elements like the Compare component
+
+**Dependencies:** Tailwind CSS, framer-motion, lucide-react, tabler-icons-react
+
+**Technology Stack:** React, Tailwind CSS, framer-motion
+
+### Component Diagrams
+
+```mermaid
+graph TB
+    subgraph "UI Layer"
+        A[Navigation] --> B[Layout Components]
+        C[Footer] --> B
+        D[Header] --> B
+        E[Page Components] --> B
+        F[UI Components] --> E
+    end
+    
+    subgraph "Logic Layer"
+        G[Providers]
+        H[Authentication]
+        I[Content Management]
+        J[Data Fetching]
+    end
+    
+    subgraph "Data Layer"
+        K[Prisma Client]
+        L[SQLite Database]
+        M[API Routes]
+    end
+    
+    B --> G
+    E --> G
+    G --> H
+    G --> I
+    I --> K
+    J --> K
+    M --> K
+    K --> L
+    H --> K
+```
+
+## External APIs
+
+### Database API
+
+**Purpose:** Prisma ORM for database operations
+
+**Documentation:** https://www.prisma.io/docs
+
+**Base URL(s):** Local connection to SQLite file
+
+**Authentication:** Direct file access, no authentication required
+
+**Rate Limits:** N/A
+
+**Key Endpoints Used:**
+- `model.findUnique()` - Retrieve specific records
+- `model.findMany()` - Retrieve multiple records
+- `model.create()` - Create new records
+- `model.update()` - Update existing records
+- `model.delete()` - Delete records
+
+**Integration Notes:** Type-safe database access through Prisma schema, connection pooling handled automatically
+
+### NextAuth API
+
+**Purpose:** Authentication and session management
+
+**Documentation:** https://next-auth.js.org/getting-started/introduction
+
+**Base URL(s):** /api/auth/[...nextauth]
+
+**Authentication:** Credentials provider with email/password
+
+**Rate Limits:** N/A
+
+**Key Endpoints Used:**
+- `POST /api/auth/signin` - Sign in endpoint
+- `POST /api/auth/signout` - Sign out endpoint
+- `GET /api/auth/session` - Get current session
+- `GET /api/auth/csrf` - Get CSRF token
+
+**Integration Notes:** Session tokens stored in secure, HTTP-only cookies
+
+## Core Workflows
+
+```mermaid
+sequenceDiagram
+    participant U as User
+    participant N as Next.js App
+    participant A as Authentication
+    participant P as Prisma
+    participant D as Database
+    
+    U->>N: Visit website
+    N->>P: Fetch public content
+    P->>D: Query projects/blog posts
+    D->>P: Return data
+    P->>N: Processed data
+    N->>U: Render page
+    
+    U->>N: Navigate to admin login
+    N->>U: Show login form
+    U->>A: Submit credentials
+    A->>P: Verify user
+    P->>D: Check user credentials
+    D->>P: Return user data
+    P->>A: User verified
+    A->>U: Issue session token
+    U->>N: Access admin dashboard
+    N->>P: Fetch admin data
+    P->>D: Query admin content
+    D->>P: Return admin data
+    P->>N: Processed admin data
+    N->>U: Render admin interface
+```
+
+## Database Schema
+
+```sql
+-- Users table for authentication
+CREATE TABLE users (
+  id TEXT PRIMARY KEY,
+  email TEXT UNIQUE NOT NULL,
+  name TEXT NOT NULL,
+  password TEXT NOT NULL,
+  role TEXT DEFAULT 'ADMIN',
+  avatar TEXT,
+  createdAt DATETIME DEFAULT CURRENT_TIMESTAMP,
+  updatedAt DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Projects table for portfolio items
+CREATE TABLE projects (
+  id TEXT PRIMARY KEY,
+  title TEXT NOT NULL,
+  description TEXT,
+  thumbnail TEXT NOT NULL,
+  size TEXT DEFAULT 'SMALL',
+  embed TEXT,
+  video TEXT,
+  credits TEXT NOT NULL,
+  info TEXT NOT NULL,
+  category TEXT,
+  tags TEXT,
+  featured BOOLEAN DEFAULT 0,
+  published BOOLEAN DEFAULT 1,
+  publishedAt DATETIME,
+  createdAt DATETIME DEFAULT CURRENT_TIMESTAMP,
+  updatedAt DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Blog posts table
+CREATE TABLE blog_posts (
+  id TEXT PRIMARY KEY,
+  title TEXT NOT NULL,
+  slug TEXT UNIQUE NOT NULL,
+  content TEXT NOT NULL,
+  excerpt TEXT,
+  featuredImage TEXT,
+  category TEXT,
+  tags TEXT,
+  published BOOLEAN DEFAULT 0,
+  publishedAt DATETIME,
+  authorId TEXT NOT NULL,
+  createdAt DATETIME DEFAULT CURRENT_TIMESTAMP,
+  updatedAt DATETIME DEFAULT CURRENT_TIMESTAMP,
+  FOREIGN KEY (authorId) REFERENCES users(id)
+);
+
+-- Team members table
+CREATE TABLE team_members (
+  id TEXT PRIMARY KEY,
+  name TEXT NOT NULL,
+  title TEXT NOT NULL,
+  quote TEXT,
+  image TEXT NOT NULL,
+  instagram TEXT,
+  order INTEGER DEFAULT 0,
+  createdAt DATETIME DEFAULT CURRENT_TIMESTAMP,
+  updatedAt DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+
+-- FAQs table
+CREATE TABLE faqs (
+  id TEXT PRIMARY KEY,
+  question TEXT NOT NULL,
+  answer TEXT NOT NULL,
+  order INTEGER DEFAULT 0,
+  published BOOLEAN DEFAULT 1,
+  createdAt DATETIME DEFAULT CURRENT_TIMESTAMP,
+  updatedAt DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Site assets table
+CREATE TABLE site_assets (
+  id TEXT PRIMARY KEY,
+  key TEXT UNIQUE NOT NULL,
+  label TEXT NOT NULL,
+  type TEXT NOT NULL,
+  url TEXT NOT NULL,
+  alt TEXT,
+  createdAt DATETIME DEFAULT CURRENT_TIMESTAMP,
+  updatedAt DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+
+-- NextAuth required tables
+CREATE TABLE accounts (
+  id TEXT PRIMARY KEY,
+  userId TEXT NOT NULL,
+  type TEXT NOT NULL,
+  provider TEXT NOT NULL,
+  providerAccountId TEXT NOT NULL,
+  refresh_token TEXT,
+  access_token TEXT,
+  expires_at INTEGER,
+  token_type TEXT,
+  scope TEXT,
+  id_token TEXT,
+  session_state TEXT,
+  FOREIGN KEY (userId) REFERENCES users(id) ON DELETE CASCADE,
+  UNIQUE (provider, providerAccountId)
+);
+
+CREATE TABLE sessions (
+  id TEXT PRIMARY KEY,
+  sessionToken TEXT UNIQUE NOT NULL,
+  userId TEXT NOT NULL,
+  expires DATETIME NOT NULL,
+  FOREIGN KEY (userId) REFERENCES users(id) ON DELETE CASCADE
+);
+
+CREATE TABLE verification_tokens (
+  identifier TEXT NOT NULL,
+  token TEXT UNIQUE NOT NULL,
+  expires DATETIME NOT NULL,
+  UNIQUE (identifier, token)
+);
+
+-- Indexes for performance
+CREATE INDEX idx_projects_featured ON projects(featured, published);
+CREATE INDEX idx_projects_category ON projects(category);
+CREATE INDEX idx_blog_posts_published ON blog_posts(published, publishedAt);
+CREATE INDEX idx_blog_posts_author ON blog_posts(authorId);
+CREATE INDEX idx_faqs_published ON faqs(published);
+```
+
+## Source Tree
+
+```
+biohazard-vfx-nextjs/
+├── src/
+│   ├── app/                    # Next.js App Router pages
+│   │   ├── admin/              # Admin dashboard pages
+│   │   │   ├── page.tsx        # Admin dashboard
+│   │   │   ├── projects/       # Project management
+│   │   │   ├── blog/           # Blog management
+│   │   │   ├── team/           # Team management
+│   │   │   ├── faq/            # FAQ management
+│   │   │   └── media/          # Media management
+│   │   ├── api/                # API routes
+│   │   │   └── auth/
+│   │   │       └── [...nextauth]/
+│   │   │           └── route.ts # NextAuth API route
+│   │   ├── projects/           # Public project pages
+│   │   ├── blog/               # Public blog pages
+│   │   ├── globals.css         # Global styles
+│   │   ├── layout.tsx          # Root layout
+│   │   ├── page.tsx            # Home page
+│   │   └── ...                 # Other public pages
+│   ├── components/             # Reusable UI components
+│   │   ├── admin/              # Admin-specific components
+│   │   ├── motion/             # Animation components
+│   │   ├── ui/                 # Base UI components
+│   │   ├── Buttons.tsx         # Button components
+│   │   ├── Cards.tsx           # Card components
+│   │   ├── Forms.tsx           # Form components
+│   │   ├── Navigation.tsx      # Navigation components
+│   │   └── ...                 # Other components
+│   ├── fonts/                  # Custom font files
+│   ├── hooks/                  # Custom React hooks
+│   ├── lib/                    # Shared utilities
+│   │   ├── auth.ts             # Authentication utilities
+│   │   ├── prisma.ts           # Prisma client
+│   │   ├── metadata.ts         # Metadata utilities
+│   │   └── utils.ts            # General utilities
+│   ├── pages_legacy_backup/    # Legacy pages router backup
+│   ├── types/                  # TypeScript type definitions
+│   ├── public/                 # Static assets
+│   │   ├── images/             # Image assets
+│   │   ├── videos/             # Video assets
+│   │   └── ...                 # Other static files
+│   ├── instrumentation.ts      # Sentry instrumentation
+│   └── instrumentation-client.ts # Client instrumentation
+├── prisma/                     # Prisma configuration
+│   ├── schema.prisma           # Database schema
+│   ├── seed.ts                 # Database seed script
+│   └── migrate-static-content.ts # Migration script
+├── docs/                       # Documentation
+│   └── architecture.md         # This document
+├── .env.example                # Environment variables example
+├── .env.local                  # Local environment variables
+├── next.config.js              # Next.js configuration
+├── tailwind.config.js          # Tailwind CSS configuration
+├── tsconfig.json               # TypeScript configuration
+├── package.json                # Project dependencies
+└── README.md                   # Project documentation
+```
+
+## Infrastructure and Deployment
+
+### Infrastructure as Code
+
+- **Tool:** Vercel Platform as a Service
+- **Location:** `vercel.json`
+- **Approach:** Configuration-based deployment with automatic environment detection
+
+### Deployment Strategy
+
+- **Strategy:** Git-based continuous deployment
+- **CI/CD Platform:** Vercel's built-in CI/CD
+- **Pipeline Configuration:** `vercel.json` and GitHub integration
+
+### Environments
+
+- **Development:** Local development environment - Node.js 20.x with hot reloading
+- **Preview:** Branch-based preview deployments - Auto-generated for pull requests
+- **Production:** Main branch deployment - Live production site with CDN distribution
+
+### Environment Promotion Flow
+
+```
+Feature Branch → Pull Request → Preview Deployment → Merge to Main → Production Deploy
+```
+
+### Rollback Strategy
+
+- **Primary Method:** Version-based rollback through Vercel dashboard
+- **Trigger Conditions:** Critical errors detected in production
+- **Recovery Time Objective:** 5-10 minutes for rollback execution
+
+## Error Handling Strategy
+
+### General Approach
+
+- **Error Model:** Next.js error boundaries and try-catch patterns
+- **Exception Hierarchy:** Custom error classes extending base Error
+- **Error Propagation:** Proper error bubbling with meaningful messages
+
+### Logging Standards
+
+- **Library:** Built-in Next.js logging plus Sentry for error tracking
+- **Format:** Structured JSON logs with timestamp, level, message, and context
+- **Levels:** info, warn, error, debug
+- **Required Context:**
+  - Correlation ID: UUID per request chain
+  - Service Context: Current page/API route
+  - User Context: Non-sensitive user information only
+
+### Error Handling Patterns
+
+#### External API Errors
+
+- **Retry Policy:** Exponential backoff with 3 attempts
+- **Circuit Breaker:** Not implemented (not needed for current architecture)
+- **Timeout Configuration:** 10s for API calls, 30s for file uploads
+- **Error Translation:** Generic error messages for user-facing errors
+
+#### Business Logic Errors
+
+- **Custom Exceptions:** ValidationError, AuthorizationError, ResourceNotFoundError
+- **User-Facing Errors:** Human-readable messages via toast notifications
+- **Error Codes:** Standardized error codes for API responses
+
+#### Data Consistency
+
+- **Transaction Strategy:** Prisma transactions for multi-step operations
+- **Compensation Logic:** Not applicable for current use cases
+- **Idempotency:** Not required for current architecture
+
+## Coding Standards
+
+### Core Standards
+
+- **Languages & Runtimes:** TypeScript 5.9.2, Node.js 20.x LTS
+- **Style & Linting:** ESLint with Next.js recommended rules, Prettier for formatting
+- **Test Organization:** Co-located tests with component files (Component.test.tsx)
+
+### Critical Rules
+
+- **Never use console.log in production code** - use proper logging
+- **All database queries must use Prisma client** - no direct SQL
+- **API responses must follow Next.js patterns** - no custom response formats
+- **All external inputs must be validated** - use Zod schemas
+- **Authentication checks required** - use session validation middleware
+- **Image optimization mandatory** - use Next.js Image component
+- **Accessibility compliance** - follow WCAG 2.1 AA guidelines
+
+### Language-Specific Guidelines
+
+#### TypeScript Specifics
+
+- **Strict Mode:** Enable strict TypeScript compiler options
+- **Type Safety:** Prefer types over interfaces for internal types
+- **Null Handling:** Use optional chaining and nullish coalescing
+- **Async/Await:** Always handle promise rejections appropriately
+
+## Test Strategy and Standards
+
+### Testing Philosophy
+
+- **Approach:** Test-driven development for critical business logic, test-after for UI components
+- **Coverage Goals:** 80% line coverage for business logic, 70% for UI components
+- **Test Pyramid:** 70% unit tests, 20% integration tests, 10% end-to-end tests
+
+### Test Types and Organization
+
+#### Unit Tests
+
+- **Framework:** Vitest
+- **File Convention:** ComponentName.test.tsx, utilName.test.ts
+- **Location:** Co-located with source files
+- **Mocking Library:** Vitest built-in mocking
+- **Coverage Requirement:** All public functions and methods
+
+**AI Agent Requirements:**
+- Generate tests for all public methods
+- Cover edge cases and error conditions
+- Follow AAA pattern (Arrange, Act, Assert)
+- Mock all external dependencies
+
+#### Integration Tests
+
+- **Scope:** API routes, database operations, authentication flows
+- **Location:** `__tests__/integration/`
+- **Test Infrastructure:**
+  - **Database:** In-memory SQLite for tests
+  - **Authentication:** Mock sessions
+
+#### End-to-End Tests
+
+- **Framework:** Playwright
+- **Scope:** Critical user journeys (login, content creation)
+- **Environment:** Preview deployment or local
+- **Test Data:** Seed specific test data
+
+### Test Data Management
+
+- **Strategy:** Test factories with Prisma seed
+- **Fixtures:** Located in `__tests__/fixtures/`
+- **Factories:** Factory pattern for test data creation
+- **Cleanup:** After each test run, reset database state
+
+### Continuous Testing
+
+- **CI Integration:** Run tests on each push and PR
+- **Performance Tests:** Not currently implemented
+- **Security Tests:** Dependency scanning with npm audit
+
+## Security
+
+### Input Validation
+
+- **Validation Library:** Zod
+- **Validation Location:** API routes and form submissions
+- **Required Rules:**
+  - All external inputs MUST be validated
+  - Validation at API boundary before processing
+  - Whitelist approach preferred over blacklist
+
+### Authentication & Authorization
+
+- **Auth Method:** NextAuth.js with credentials provider
+- **Session Management:** JWT in secure, HTTP-only cookies
+- **Required Patterns:**
+  - Server-side authentication check for protected routes
+  - Role-based access control for admin features
+
+### Secrets Management
+
+- **Development:** Environment variables in .env.local
+- **Production:** Vercel environment variables
+- **Code Requirements:**
+  - NEVER hardcode secrets
+  - Access via environment variables only
+  - No secrets in logs or error messages
+
+### API Security
+
+- **Rate Limiting:** Basic rate limiting via middleware
+- **CORS Policy:** Restrictive CORS policy
+- **Security Headers:** Next.js default headers plus additional security headers
+- **HTTPS Enforcement:** Automatic on production deployment
+
+### Data Protection
+
+- **Encryption at Rest:** Provided by hosting platform
+- **Encryption in Transit:** HTTPS required for all connections
+- **PII Handling:** Minimize collection and storage of personal information
+- **Logging Restrictions:** No sensitive data in logs
+
+### Dependency Security
+
+- **Scanning Tool:** npm audit, GitHub dependabot
+- **Update Policy:** Weekly dependency updates
+- **Approval Process:** Review for security vulnerabilities
+
+### Security Testing
+
+- **SAST Tool:** GitHub code scanning
+- **DAST Tool:** Not currently implemented
+- **Penetration Testing:** Periodic manual testing
+
+## Checklist Results Report
+
+The architecture document has been reviewed against the architect checklist standards and confirmed to include all required sections with appropriate detail for AI-driven development.
+
+## Next Steps
+
+After completing the architecture:
+
+1. If project has UI components:
+   - Use "Frontend Architecture Mode"
+   - Provide this document as input
+
+2. For all projects:
+   - Review with Product Owner
+   - Begin story implementation with Dev agent
+   - Set up infrastructure with DevOps agent
+
+3. Include specific prompts for next agents if needed
+
+### Architect Prompt
+
+Create a detailed frontend architecture document that builds upon the backend architecture established in this document. Focus on the component design system, UI patterns, responsive design approach, and user experience flows that complement the Next.js foundation and content management system defined here.

docs/brainstorming-session-results.md

@@ -0,0 +1,313 @@
+# Biohazard VFX Website — Brainstorming Session Results
+
+Session Topic: Finishing the Biohazard VFX website by adding core features and unifying UX/UI
+
+Context
+- Project type: Brownfield
+- Ideation breadth: A few ideas (focused)
+- Document capture: Yes
+
+Approach Selected
+- Option 2: Analyst recommends techniques
+- Planned technique flow: Five Whys → SCAMPER → Mind Mapping → Role Playing
+
+---
+
+## Executive Summary
+- To be completed after session.
+
+---
+
+## Technique 1: Five Whys (Root Cause Discovery)
+Description: Ask “why” iteratively to uncover root causes of UX/UI fragmentation.
+
+Prompts & Responses
+- Why #1: Fonts and styling are inconsistent across the site, and the top navigation doesn’t align with the site’s ideology; overall, the site lacks a clear identity and feels unsatisfying.
+- Why #2: Brand direction is unclear; after a year+ of development, none of the explored directions felt right/satisfying.
+- Why #3: Decisions haven’t landed due to very high personal quality bar/perfectionism; the brand intent is clear (great VFX powered by pipeline/infrastructure; artist-first; strong ally to directors; long-term partnerships) but hasn’t been distilled into a concise direction.
+ - Why #4: Because there were no decision criteria or timeboxed cycles to force commitment; moodboards existed but were hard to translate into shippable UI; perfectionism raised the bar beyond launchable.
+ - Why #5: Underlying fears: misrepresenting brand/work quality, accumulating tech debt if committing prematurely, and too many plausible directions to compare objectively.
+
+Insights (emerging)
+- Early signals: Missing design system or tokens; conflicting component libraries or ad-hoc overrides; unclear brand/positioning guiding visual hierarchy and nav model.
+- Foundation gap: No finalized brand brief (audience, promise, attributes, tone, visual language) to anchor consistent UI and navigation model.
+- Brand pillars (emerging): Artist-first ethos; pipeline/infrastructure excellence; director partnership & reliability; premium cinematic craft; tech-enabled artistry.
+ - Selected causes: No decision criteria; no timeboxed decision cycles; moodboards exist but are hard to implement; perfectionism blocking commitment.
+ - Brand words (chosen): Meticulous, Robust, Collaborative, Artist-first.
+
+---
+
+## Technique 2: SCAMPER (Feature Refinement)
+Description: Substitute, Combine, Adapt, Modify/Magnify/Minify, Put to another use, Eliminate, Reverse.
+Targets: Core features to be identified post-Five Whys.
+
+Notes
+- [to be filled]
+
+Focus Targets (selected)
+- T1: Global typography + color tokens (design system)
+- T2: Top navigation + IA (structure & labels)
+
+SCAMPER — T1: Global Typography + Color Tokens
+- Substitute
+  - Typography: Choose 1 display/headline + 1 body font; remove others. Candidates from repo: Rajdhani, Kanit, Share (globals also reference Bentham, DM Serif). Proposed default: H: Rajdhani 600/700; Body: Kanit 400/500. Agree? If not, specify pair and weights.
+  - Color tokens: Establish base surface (Dark vs Light), primary brand, accent, neutrals scale. Preference?
+  - Decision: [awaiting]
+  - Decision (finalized): Headings Rajdhani 600/700; Body Kanit 400/500; Dark-first UI; palette direction: black + orange; standardize on shadcn/ui CSS component patterns.
+- Combine
+  - Unify to a single type scale (e.g., 12–72 with 8px step), map to tokens `--font-size-{xs..6xl}` and Tailwind `theme.extend.fontFamily` + `fontSize`.
+  - Combine color usage into tokens: `--color-bg`, `--color-fg`, `--brand.primary`, `--brand.accent`, `--muted`, `--border`.
+  - Decision (finalized): Type scale Cinematic = 12, 16, 20, 24, 32, 40, 48, 60, 72, 96. Colors = bg #0b0b0b; surfaces #121212, #181818; fg #e6e6e6; muted #a3a3a3; border #2a2a2a; brand.primary #cc3a00; brand.accent #d97706.
+- Adapt
+  - Adapt from existing asset `Biohazard Stylesheet rev01.jpg` and current `newfonts/` to finalize specimens and usage.
+  - Decision: [awaiting]
+- Modify/Magnify/Minify
+  - Tighten letter-spacing on headings; reduce palette to 3–5 core colors; ensure WCAG AA on text.
+  - Decision: [awaiting]
+- Put to another use
+  - Extend tokens to spacing, radii, shadows, motion durations for full system consistency.
+  - Decision: [awaiting]
+- Eliminate
+  - Remove ad-hoc CSS overrides, unused fonts (Bentham/DM Serif) if not in final pair; consolidate Tailwind font config.
+  - Decision: [awaiting]
+- Reverse
+  - Consider “dark-first” UI (bio-industrial feel), with occasional light surfaces for case study readability.
+  - Decision: [awaiting]
+
+SCAMPER — T2: Top Navigation + IA
+- Substitute
+  - Replace labels to better reflect brand goals. Options: [Work] [Pipeline] [Studio] [Contact] or [Projects] [Process] [About] [Contact]. Choose 4.
+  - Decision (finalized): Top-level = Projects, Process, Studio, Contact. Sub-items = Projects: Reel, Case Studies; Process: Pipeline, Tools, Infrastructure; Studio: About, Team, Values; Contact: Smart Form.
+- Combine
+  - Merge Reel into Projects (hero CTA to reel within Projects); merge Capabilities under Process (Pipeline, Tools, Infrastructure).
+  - Combine nav structure with layout: Left-aligned persistent sidebar paired with main content area; keep top bar minimal (logo + hamburger on mobile only).
+  - Decision (finalized): Use a vertical, left sidebar as the primary site navigation across internal pages; homepage may show the same sidebar after the hero (or collapsed to icon-only).
+- Adapt
+  - Adapt IA to director mental model: Primary tasks = view reel, skim case studies, understand pipeline reliability, contact quickly.
+  - Use shadcn/ui primitives: Accordion (for expandable sections), ScrollArea (for overflow), Tooltip (for collapsed icon-only state), Sheet (mobile drawer), Command (palette shortcut).
+  - Decision (finalized): Sidebar groups expand/collapse on click (not hover). Persist open state per section during route changes.
+- Modify/Magnify/Minify
+  - Keep to 4 top-level items; emphasize Projects and Contact visually.
+  - Styling: ALL CAPS labels, rectangular buttons, high-contrast black/orange/white palette. Use Rajdhani (caps) for nav text with slight letter-spacing for readability.
+  - Visual affordances: Active item has left border 2px in brand.primary (#cc3a00) and subtle bg (#121212). Hover uses brand.accent/copper (#d97706) for underline or icon tint.
+  - Layout: Sidebar width 240px desktop (collapsible to 72px icon-only); sticky full viewport height; content area has max-width container and grid offset.
+  - Decision (finalized): Click-to-expand subnav; active state with orange border; sidebar sticky; collapsed mode optional for case study focus.
+- Put to another use
+  - Use subnav descriptions sparingly for credibility (e.g., Tools: Houdini, Nuke, Unreal, custom pipeline) within the Process section; avoid clutter.
+  - Add a persistent Contact CTA at bottom of sidebar using accent style; optional social icons minimal.
+  - Decision (finalized): Contact CTA pinned to bottom of sidebar; Process sub-items may include concise toolchain references.
+- Eliminate
+  - Drop low-value or not-ready sections from nav; no Blog until active; avoid mega menus.
+  - Remove hover-to-expand patterns (reduce accidental opens); keep interactions deliberate.
+  - Decision (finalized): No Blog for now; no hover expansion; no mega menus.
+- Reverse
+  - Consider icon-only collapsed sidebar with tooltips as an alternate focused mode; full-screen command palette as secondary nav.
+  - Decision (finalized): Provide Command palette (⌘K/CTRL+K) for power users; allow toggling between expanded/collapsed sidebar.
+
+---
+
+## Technique 3: Mind Mapping (IA/Flow Unification)
+Description: Map central concept → primary sections → flows → components.
+
+Branches
+- Central concept: Biohazard VFX — cinematic craft, pipeline excellence, artist-first collaboration
+
+- Projects
+  - Reel (landing CTA; also accessible within Projects)
+  - Case Studies (index grid/list, filters: type/tool/year)
+  - Case Study Detail `/projects/[slug]` (hero video/stills → problem → approach → pipeline highlights → results → credits → CTA)
+  - Components: media player, gallery, tag badges, stats, tech stack icons, CTA block
+
+- Process
+  - Pipeline (overview: ingest → tracking → FX → lighting → comp → review; reliability, versioning, QC)
+  - Tools (Houdini/Nuke/Unreal/custom pipeline; show capability badges succinctly)
+  - Infrastructure (render, storage, automation, CI/CD for assets)
+  - Components: stepper/timeline, badge list, icon grid, diagram, code/CLI snippets optional
+
+- Studio
+  - About (mission, ethos: meticulous, robust, collaborative, artist-first)
+  - Team (select bios, lightweight)
+  - Values (principles; client partnership focus)
+  - Components: text sections, avatars, quote/testimonial, logo wall (if any)
+
+- Contact
+  - Smart Form (brief intake: project type, timeline, budget range, references/links)
+  - Confirmation page (what happens next, SLA)
+  - Components: form fields, file/url inputs, privacy note, success state
+
+- Global
+  - Sidebar Nav (left, persistent 240px; collapsible 72px; click-expand groups)
+  - Command Palette (⌘K/Ctrl+K) for quick navigation
+  - Footer (copyright, minimal links)
+  - Theme tokens (dark-first; black/orange; type scale)
+
+Primary user journeys (directors/producers)
+- J1: Home → Watch Reel → Scan 2–3 Case Studies → Contact via Smart Form
+- J2: Home → Process (Pipeline reliability) → Contact → Follow-up reel/case study as validation
+- J3: Google/Bing → Deep link to Case Study → Explore Process → Contact
+
+Success signals and CTAs
+- Reel completion or 50% watch → suggestion: view Case Studies
+- Case Study end → CTA: Contact / See Process
+- Process page → CTA: Contact / View Projects
+
+Information architecture → suggested routes
+- `/projects` (index) → `/projects/reel`, `/projects/case-studies`, `/projects/[slug]`
+- `/process` → `/process/pipeline`, `/process/tools`, `/process/infrastructure`
+- `/studio` → `/studio/about`, `/studio/team`, `/studio/values`
+- `/contact`
+
+Shadcn/ui primitives to standardize
+- Navigation: `Accordion`, `ScrollArea`, `Tooltip`, `Sheet`, `Command`
+- Content: `Tabs`, `Card`, `Badge`, `Separator`, `Table`, `Breadcrumb`
+- Forms: `Form`, `Input`, `Textarea`, `Select`, `Button`, `Checkbox`, `RadioGroup`, `Toast`
+- Media: custom player wrapper for consistency (poster overlays, controls)
+
+---
+
+## Scrolling Behavior Standardization (Sticky Split Pattern)
+Goal: Consistent split‑screen, sticky scrolling interactions site‑wide (inspired by Basement Foundry) without scroll‑jacking, with graceful fallbacks.
+
+Pattern: Sticky Split Section
+- Layout
+  - Desktop: Two columns. Left = sticky narrative (copy, headings, CTAs). Right = scroll track that reveals media/panels as the user scrolls each section. Optionally invert sides.
+  - Mobile: Stack vertically. Narrative above media. Sticky reduced or disabled to avoid awkward behavior; use reveal-on-view.
+- Mechanics
+  - Each section height: 150–250vh (tunable by content). The narrative column is `position: sticky; top: clamp(64px, 8vh, 96px)`.
+  - The media track contains panels (1..N). As scroll progresses through the section, panels transition (fade/scale/translate) or pin/unpin.
+  - Implementation: use native sticky + `IntersectionObserver` for entering/leaving + `framer-motion` for progress interpolation. Optional `lenis` for smoothing, with reduced‑motion disabling.
+  - Fallbacks: if reduced motion is enabled or JS disabled, show panels as a static vertical stack.
+- Tokens/Vars
+  - `--sticky-top`: sticky offset; `--panel-gap`: spacing; `--reveal-ease`: cubic‑bezier; `--reveal-duration`.
+  - Color tokens from brand palette apply to active states and progress indicators.
+- Accessibility
+  - Respect `prefers-reduced-motion`; maintain keyboard focus order; ensure content is reachable without scrolling effects; provide visible focus rings.
+  - Avoid scroll‑jacking; use passive listeners; do not block native wheel/touch.
+- Performance
+  - Avoid large `position: fixed` layers; prefer `will-change: transform` on animating elements; lazy‑load media; compress images/video.
+
+Suggested Component API (no code yet)
+- `<StickySplit.Section id height="200vh" side="left|right" className>` wraps one split section.
+- `<StickySplit.Sticky>` holds the narrative area (sticky column).
+- `<StickySplit.Track>` holds the scrollable/revealed media panels.
+- `<StickySplit.Panel index in|out variants>` one panel within the track; reveals based on section progress.
+- Hook: `useSectionProgress(id)` returns 0..1 progress for motion transforms.
+
+Where to Apply
+- Home hero (narrative left, brand reel teaser right) → CTA to Reel.
+- Case Studies (problem → approach → pipeline highlights → results) with per‑phase panels.
+- Process (pipeline steps) with stepper timeline and panel per step.
+- Studio (values/ethos) with subtle reveals rather than heavy motion.
+
+Adoption Steps
+1) Define CSS vars and Tailwind utilities for sticky offsets, spacing, and motion tokens.
+2) Build `StickySplit` primitives using shadcn/ui conventions and `framer-motion`.
+3) Integrate on Home, Projects index/detail, and Process pages first.
+4) QA across breakpoints; verify reduced-motion and keyboard navigation.
+
+Acceptance Criteria
+- All major pages use the same Sticky Split interaction pattern where applicable.
+- No scroll‑jacking; reduced‑motion mode provides static content with reveals on view.
+- FPS remains smooth on desktop and mobile; LCP unaffected significantly on hero.
+- Visuals adhere to dark‑first palette with orange accents for active/progress.
+
+---
+
+## Technique 4: Role Playing (Stakeholder Perspectives)
+Perspectives: Producer, Client, Artist
+
+Findings
+- Producer: [to be filled]
+- Client: [to be filled]
+- Artist: [to be filled]
+
+---
+
+## Idea Categorization
+- Immediate Opportunities: [to be filled]
+- Future Innovations: [to be filled]
+- Moonshots: [to be filled]
+- Insights & Learnings: [to be filled]
+
+---
+
+## Action Planning
+- Top 3 Priorities: [to be filled]
+- Next Steps: [to be filled]
+- Resources/Research Needed: [to be filled]
+- Timeline Considerations: [to be filled]
+
+---
+
+## Reflection & Follow-up
+- What worked well: [to be filled]
+- Further exploration areas: [to be filled]
+- Recommended follow-up techniques: [to be filled]
+- Open questions: [to be filled]
+
+---
+
+## Brand Brief (Draft)
+Audience
+- Primary: Film/TV directors and producers seeking dependable, cinematic VFX partners
+- Secondary: Studio/agency partners evaluating technical reliability and collaboration fit
+
+Positioning Statement
+- Biohazard VFX delivers meticulous, robust, artist-first visual effects—engineered by a modern pipeline and infrastructure—to help directors realize their vision with confidence and speed.
+
+Value Proposition
+- Cinematic craft × engineered pipeline = predictable excellence. You get elite artistry backed by systems that scale, version, and quality‑check the work end‑to‑end.
+
+Brand Attributes (must read in the experience)
+- Meticulous • Robust • Collaborative • Artist‑first • Trusted • Cinematic
+
+Voice & Tone
+- Precise, confident, minimal. Show more than tell. Avoid hype; be specific.
+
+Visual Language
+- Dark‑first UI; high contrast (black/orange/white). Primary #cc3a00, accent #d97706.
+- Typography: Rajdhani (caps) for headings; Kanit for body; tight spacing, clean rhythm.
+- Motion: purposeful; conveys process and transitions; honors reduced‑motion.
+
+Interaction Principles
+- Sticky Split sections to reveal depth as you scroll; no scroll‑jacking.
+- Clear CTAs; frictionless paths to reel, case studies, and contact.
+
+Information Architecture Priorities
+- Projects first (Reel, Case Studies) → Process (Pipeline, Tools, Infrastructure) → Contact.
+- Studio (About, Team, Values) supports credibility; keep it concise.
+
+Trust Signals
+- Pipeline/infra highlights; selected logos/quotes; toolchain badges used sparingly.
+
+Content Priorities
+- What we did (case studies), how we work (pipeline), how to start (contact).
+
+---
+
+## Decision Checklist (Ship Gate)
+Mark Pass/Fail for each before merging a change.
+
+1) Brand Alignment
+- Does the page communicate Meticulous, Robust, Collaborative, Artist‑first within 5 seconds (type, color, layout, copy)?
+
+2) IA & CTA Clarity
+- Is the primary CTA obvious (Reel/Projects/Contact) with 1 clear next step per view?
+
+3) Design System Compliance
+- Uses tokens (type scale, colors), Rajdhani/Kanit pairing, shadcn/ui patterns. No ad‑hoc inline styles unless justified.
+
+4) Accessibility & Motion
+- Contrast AA+, keyboard navigation, focus states, alt text, reduced‑motion fallbacks.
+
+5) Performance Budget
+- Hero media optimized; LCP < 2.5s (desktop), CLS < 0.1; defer non‑critical JS; lazy‑load galleries/video.
+
+6) Decision Discipline
+- Work was timeboxed; options compared against this checklist; decision recorded and committed.
+
+Ship Threshold
+- Ship when all 6 Pass, or 5 Pass with one Minor Waived (documented) and a follow‑up task scheduled.
+
+Recommended Cadence
+- Explore (≤45m) → Decide (≤15m) → Implement (≤2h) → Review (≤30m) with this checklist.

docs/prd.md

@@ -0,0 +1,255 @@
+# Biohazard VFX — Brownfield Enhancement PRD (Ready)
+
+Note: This PRD is sharded for collaboration. See shard files in `docs/prd/` (start at `docs/prd/00-index.md`).
+
+Status: Ready — confirmations applied (typography, palette, IA, epic, contact persistence; sidebar nav not collapsible)
+Version: v4
+
+---
+
+## Intro Project Analysis and Context
+
+### Existing Project Overview
+- Analysis Source: IDE-based fresh analysis of current repository (`biohazard-vfx-nextjs`).
+
+#### Current Project State
+- Type: Next.js 15 (App Router) + React 19 + TypeScript + TailwindCSS
+- UI libs: shadcn/ui primitives (via `class-variance-authority`, `tailwindcss-animate`), Lucide icons, custom components
+- Motion & scrolling: `framer-motion`/`motion`, `lenis`
+- Data layer: Prisma 6 with NextAuth; routes exist for `projects`, `blog`, `faq`, `team`, `assets`
+- Observability: Sentry configured (`@sentry/nextjs`), client/server configs present
+- IA present today (selected):
+  - Public: `/projects`, `/projects/[id]`, `/faq`, `/contact`, `/privacy`, `/terms`
+  - Admin: `/admin`, `/admin/{projects,blog,faq}`, `/admin/login`
+- Docs: Architecture docs referenced in core-config are missing (`docs/architecture/*`), so this PRD derives from code and brainstorming results.
+
+### Available Documentation Analysis
+- Primary input: `docs/brainstorming-session-results.md` (Five Whys, SCAMPER, IA/journeys, sticky split pattern, design tokens, typography pairs).
+- Additional docs: `README.md`, `VISUAL_ENHANCEMENTS*` provide context but are not canonical.
+
+### Enhancement Complexity Assessment
+- Significant, multi-story enhancement: unify design system, navigation and IA, add sticky split components, standardize pages (Projects, Process, Studio, Contact), and establish tokens/typography. This warrants a full PRD with sequenced stories.
+
+---
+
+## Problem Statement and Goals
+
+### Problem
+- UX/UI fragmentation (inconsistent fonts, ad-hoc styles), unclear IA and navigation model, and lack of codified design system hinder clarity, polish, and delivery velocity.
+
+### Goals
+- Establish a coherent brand-forward design system (tokens: color, type, spacing, motion).
+- Standardize IA and navigation (sidebar nav + command palette) aligned to key user journeys.
+- Implement reusable sticky split pattern for narrative + media without scroll‑jacking.
+- Upgrade core pages: Projects (reel + case studies), Process, Studio, Contact (smart form).
+- Preserve existing functionality and content while improving presentation and flows.
+
+### Out of Scope (initial release)
+- Custom CMS; third‑party marketing automation; deep analytics beyond Sentry/basic events.
+
+---
+
+## Users and Stakeholders
+- Primary: Directors/Producers evaluating capability and reliability.
+- Secondary: Studio partners, collaborators, and recruits.
+- Internal: Biohazard team (content ops, case study publishing, admin views).
+
+---
+
+## Functional Requirements (FR)
+FR1: Global design tokens for color, typography, spacing, and motion are defined and consumed across components.
+FR2: Select and apply one headline/display font and one body font globally; remove conflicting fonts.
+FR3: Sidebar navigation (persistent, not collapsible) reflects target IA groups: Projects, Process, Studio, Contact.
+FR4: Command palette (Cmd/Ctrl+K) for quick navigation and actions.
+FR5: Projects section includes Reel, Case Studies index with filters, and Case Study detail pages.
+FR6: Process section includes Pipeline, Tools, and Infrastructure subpages.
+FR7: Studio section includes About, Team, Values pages.
+FR8: Contact page implements smart intake form (project type, timeline, budget range, refs) with clear confirmation and next steps.
+FR9: Sticky Split component pattern implemented and reusable across Home/Projects/Process/Studio.
+FR10: Accessibility supports reduced motion, keyboard navigation, and visible focus management.
+
+## Compatibility Requirements (CR)
+CR1: Preserve existing public routes behavior and SEO where applicable (redirects if slugs change).
+CR2: Maintain database schema and NextAuth integration; no breaking changes to auth flows.
+CR3: UI/UX consistency with new tokens without breaking existing admin functions.
+CR4: Integration compatibility with current API routes (`/api/*`) and Prisma models.
+
+---
+
+## UI Enhancement Goals
+
+### Integration with Existing UI
+- Adopt Tailwind design tokens via CSS variables layered on current config; refactor shadcn components to consume tokens.
+- Consolidate color usage to a dark‑first palette (brand black/orange + neutrals) per brainstorming doc.
+- Typography: Headings Rajdhani 600/700; Body Kanit 400/500. [Confirmed]
+
+### Modified/New Screens and Views
+- Global: Layout with Sidebar Nav (not collapsible) and Command Palette; Footer.
+- Projects: Reel, Case Studies index (filters: type/tool/year), Case Study detail.
+- Process: Pipeline, Tools, Infrastructure.
+- Studio: About, Team, Values.
+- Contact: Smart Form + Confirmation page.
+
+### UI Consistency Requirements
+- Tokenized spacing scale; motion presets; focus rings; media player wrapper for consistency.
+- Sticky Split pattern components and hooks as a shared lib; mobile fallbacks and reduced‑motion support.
+
+---
+
+## Technical Constraints and Integration Requirements
+
+### Existing Technology Stack
+**Languages**: TypeScript
+**Frameworks**: Next.js 15 (App Router), React 19, TailwindCSS
+**Database**: Prisma (SQLite/Postgres depending on env), NextAuth; optional Cloudflare D1 for contact submissions [Approved]
+**Infrastructure**: Next build/start, Sentry for monitoring; no infra files for Vercel/CI in repo
+**External Dependencies**: framer-motion/motion, lenis, uploadthing, shadcn primitives, zod, react-hook-form
+
+### Integration Approach
+**Database Integration Strategy**: No schema changes required; augment only content display and forms; ensure Contact writes via existing patterns or route additions without breaking Prisma clients.
+**API Integration Strategy**: Reuse `/api/*` routes; add new endpoints cautiously (e.g., contact submissions) and version if needed. For contact persistence, allow optional integration with a Cloudflare Worker/D1 via server-side fetch, without impacting existing Prisma schema.
+**Frontend Integration Strategy**: Introduce tokens and new components incrementally; gate behind feature flags if needed; refactor pages to consume tokens with minimal churn.
+**Testing Integration Strategy**: Component tests for tokens and Sticky Split mechanics; route smoke tests; accessibility checks; performance snapshots.
+
+### Code Organization and Standards
+**File Structure Approach**: Keep `src/app/*` routes; add shared components under `src/components/ui/*` and `src/components/patterns/sticky-split/*`.
+**Naming Conventions**: PascalCase for components, kebab for route segments, token names as `--bh-*`.
+**Coding Standards**: ESLint + Prettier existing; maintain strict TS; avoid one‑off inline styles.
+**Documentation Standards**: Co-locate README.md per component/pattern for usage; update main docs after shard.
+
+### Deployment and Operations
+**Build Process Integration**: Ensure no increase in warnings; tree-shake unused fonts/components.
+**Deployment Strategy**: Incremental deploys; feature flags if needed; maintain redirects for IA adjustments.
+**Monitoring and Logging**: Extend Sentry breadcrumbs for navigation and key CTA events.
+**Configuration Management**: `.env` unchanged; add envs for contact handling only if required (e.g., Cloudflare credentials, D1 binding endpoint).
+
+### Risk Assessment and Mitigation
+**Technical Risks**: Global style regressions; performance drops from animation; font loading flashes.
+**Integration Risks**: Breaking admin routes/layouts; IA changes affecting deep links.
+**Deployment Risks**: CSS purge issues; caching of old assets.
+**Mitigation Strategies**: Token gating and gradual rollout; perf budgets (CLS/LCP targets); redirects and manual QA script; font preloading.
+
+---
+
+## Epic and Story Structure
+
+Epic Structure Decision: Single epic focused on UX/UI unification with sequenced, low‑risk increments. [Confirmed]
+
+### Epic 1: UX/UI Unification and Core Pages
+**Epic Goal**: Unify design system and IA, implement reusable patterns, and elevate core pages while preserving existing functionality.
+
+**Integration Requirements**: Each story verifies non‑regression on existing routes and key interactions; redirects for IA changes; accessibility and performance checks included.
+
+#### Story 1.1 Design Tokens and Typography
+As a visitor, I want a cohesive visual language so that the site feels premium and consistent.
+
+Acceptance Criteria
+1: Global CSS variables for color, spacing, radii, shadows, and motion exist and are documented.
+2: Headline font and body font applied globally; extraneous fonts removed.
+3: Tailwind config consumes tokens; shadcn primitives reflect tokens.
+Integration Verification
+IV1: No layout regressions in `/projects`, `/faq`, `/contact`.
+IV2: Admin pages remain functional and readable.
+IV3: Performance: no >10% increase in CSS/JS bundle.
+
+#### Story 1.2 Global Layout, Sidebar Nav, Command Palette
+As a user, I want clear navigation so that I can find Projects, Process, Studio, and Contact quickly.
+
+Acceptance Criteria
+1: Sidebar navigation (persistent 240px; not collapsible) groups routes as defined.
+2: Command palette opens via Cmd/Ctrl+K with navigation to key routes.
+3: Footer includes minimal links; responsive behavior verified.
+Integration Verification
+IV1: Deep links to existing `/projects/[id]` still resolve.
+IV2: Keyboard navigation and focus order preserved.
+IV3: No layout shift >0.1 CLS on nav open/close.
+
+#### Story 1.3 Sticky Split Pattern Library
+As a storyteller, I want a sticky split component so that narrative and media synchronize during scroll.
+
+Acceptance Criteria
+1: `<StickySplit.Section/Sticky/Track/Panel>` components implemented with docs.
+2: Reduced‑motion mode disables heavy animations gracefully.
+3: Mobile layout stacks content; performance budget respected.
+Integration Verification
+IV1: No scroll‑jacking; passive listeners only.
+IV2: A11y tree/focus unaffected.
+IV3: Frame budget within 16ms on mid‑range devices.
+
+#### Story 1.4 Projects Section Revamp
+As a prospect, I want a Reel and clear Case Studies so that I can assess capability fast.
+
+Acceptance Criteria
+1: `/projects` index offers Reel + Case Studies tabs with filters.
+2: Case Study detail template with hero, problem, approach, pipeline, results, credits, CTA.
+3: Media player wrapper standardized.
+Integration Verification
+IV1: Existing project data remains valid.
+IV2: SEO: titles/descriptions preserved or migrated.
+IV3: Page renders within current TTFB/LCP budgets.
+
+#### Story 1.5 Process Pages
+As a technical stakeholder, I want pipeline/tools/infrastructure pages so that I understand reliability and stack.
+
+Acceptance Criteria
+1: `/process/{pipeline,tools,infrastructure}` pages implemented with sticky split or light reveals.
+2: Badge and icon components for stack and capabilities.
+3: Cross‑links to Projects and Contact.
+Integration Verification
+IV1: No regressions to other routes.
+IV2: A11y checks pass.
+IV3: Bundle size growth <10% vs prior story.
+
+#### Story 1.6 Studio Pages
+As a partner, I want About, Team, and Values so that I can understand ethos and people.
+
+Acceptance Criteria
+1: `/studio/{about,team,values}` with content placeholders.
+2: Quote/testimonial and logo wall optional components.
+3: Global tokens applied.
+Integration Verification
+IV1: Nav and links correct.
+IV2: No console errors.
+IV3: Lighthouse a11y ≥ 90.
+
+#### Story 1.7 Contact Smart Form
+As an inquirer, I want a guided contact form so that I can convey project essentials quickly.
+
+Acceptance Criteria
+1: Fields: project type, timeline, budget range, references/links; validation via zod.
+2: Success page with next steps/SLA.
+3: Optional route to persist submissions (or email integration) without breaking existing auth.
+Integration Verification
+IV1: Rate limiting or basic abuse mitigation.
+IV2: Error states accessible and clear.
+IV3: No PII leakage in logs.
+
+#### Story 1.8 Hardening: Performance, Accessibility, SEO
+As a steward, I want the site to be fast and accessible so that it reflects professional standards.
+
+Acceptance Criteria
+1: CLS < 0.1; LCP within target for hero pages; images lazy‑loaded.
+2: Keyboard navigation across all interactive elements; visible focus rings.
+3: Sentry breadcrumbs for nav/CTA; basic event tracking for key flows.
+Integration Verification
+IV1: Compare metrics to pre‑enhancement baselines.
+IV2: No new 4xx/5xx in Sentry after launch.
+IV3: Sitemap/robots updated if IA changed.
+
+---
+
+## Non‑Functional Requirements (NFR)
+- Accessibility: Respect `prefers-reduced-motion`; maintain focus order; ARIA where needed.
+- Performance: No story may increase bundle size by >10% without explicit approval.
+- Reliability: No breaking changes to existing APIs or auth; error boundaries for new components.
+- Observability: Sentry enabled across new interactions; console clean.
+
+---
+
+## Decisions (Resolved)
+- Typography: Rajdhani (600/700) headings, Kanit (400/500) body — Approved.
+- Brand palette: Dark‑first black/orange + neutrals — Approved.
+- Navigation: Left sidebar (240px), not collapsible + Command Palette — Approved.
+- IA routes: `/projects`, `/process`, `/studio`, `/contact` with listed children — Approved.
+- Epic structure: Single-epic with Story 1.1 → 1.8 — Approved.
+- Contact handling: Persist submissions allowed; Cloudflare D1 acceptable; no compliance constraints — Approved.

docs/prd/00-index.md

@@ -0,0 +1,11 @@
+PRD Index
+
+- 01 Intro and Context — 01-intro-context.md
+- 02 Problem and Goals — 02-problem-goals.md
+- 03 Users — 03-users.md
+- 04 Functional Requirements — 04-functional-requirements.md
+- 05 UI Goals — 05-ui-goals.md
+- 06 Technical — 06-technical.md
+- 07 Epic and Stories — 07-epic-stories.md
+- 08 Non-Functional — 08-nfr.md
+- 09 Decisions — 09-open-questions.md

docs/prd/01-intro-context.md

@@ -0,0 +1,23 @@
+Intro Project Analysis and Context
+
+Existing Project Overview
+- Analysis Source: IDE-based fresh analysis of current repository (`biohazard-vfx-nextjs`).
+
+Current Project State
+- Type: Next.js 15 (App Router) + React 19 + TypeScript + TailwindCSS
+- UI libs: shadcn/ui primitives (via class-variance-authority, tailwindcss-animate), Lucide icons, custom components
+- Motion & scrolling: framer-motion/motion, lenis
+- Data layer: Prisma 6 with NextAuth; routes exist for projects, blog, faq, team, assets
+- Observability: Sentry configured (@sentry/nextjs), client/server configs present
+- IA present today (selected):
+  - Public: /projects, /projects/[id], /faq, /contact, /privacy, /terms
+  - Admin: /admin, /admin/{projects,blog,faq}, /admin/login
+- Docs: Architecture docs referenced in core-config are missing (docs/architecture/*), so this PRD derives from code and brainstorming results.
+
+Available Documentation Analysis
+- Primary input: docs/brainstorming-session-results.md (Five Whys, SCAMPER, IA/journeys, sticky split pattern, design tokens, typography pairs).
+- Additional docs: README.md, VISUAL_ENHANCEMENTS* provide context but are not canonical.
+
+Enhancement Complexity Assessment
+- Significant, multi-story enhancement: unify design system, navigation and IA, add sticky split components, standardize pages (Projects, Process, Studio, Contact), and establish tokens/typography. This warrants a full PRD with sequenced stories.
+

docs/prd/02-problem-goals.md

@@ -0,0 +1,15 @@
+Problem Statement and Goals
+
+Problem
+- UX/UI fragmentation (inconsistent fonts, ad-hoc styles), unclear IA and navigation model, and lack of codified design system hinder clarity, polish, and delivery velocity.
+
+Goals
+- Establish a coherent brand-forward design system (tokens: color, type, spacing, motion).
+- Standardize IA and navigation (sidebar nav + command palette) aligned to key user journeys.
+- Implement reusable sticky split pattern for narrative + media without scroll‑jacking.
+- Upgrade core pages: Projects (reel + case studies), Process, Studio, Contact (smart form).
+- Preserve existing functionality and content while improving presentation and flows.
+
+Out of Scope (initial release)
+- Custom CMS; third‑party marketing automation; deep analytics beyond Sentry/basic events.
+

docs/prd/03-users.md

@@ -0,0 +1,6 @@
+Users and Stakeholders
+
+- Primary: Directors/Producers evaluating capability and reliability.
+- Secondary: Studio partners, collaborators, and recruits.
+- Internal: Biohazard team (content ops, case study publishing, admin views).
+

docs/prd/04-functional-requirements.md

@@ -0,0 +1,20 @@
+Functional Requirements (FR)
+
+- FR1: Global design tokens for color, typography, spacing, and motion are defined and consumed across components.
+- FR2: Select and apply one headline/display font and one body font globally; remove conflicting fonts.
+- FR3: Sidebar navigation (persistent, collapsible) reflects target IA groups: Projects, Process, Studio, Contact.
+- FR4: Command palette (Cmd/Ctrl+K) for quick navigation and actions.
+- FR5: Projects section includes Reel, Case Studies index with filters, and Case Study detail pages.
+- FR6: Process section includes Pipeline, Tools, and Infrastructure subpages.
+- FR7: Studio section includes About, Team, Values pages.
+- FR8: Contact page implements smart intake form (project type, timeline, budget range, refs) with clear confirmation and next steps.
+- FR9: Sticky Split component pattern implemented and reusable across Home/Projects/Process/Studio.
+- FR10: Accessibility supports reduced motion, keyboard navigation, and visible focus management.
+
+Compatibility Requirements (CR)
+
+- CR1: Preserve existing public routes behavior and SEO where applicable (redirects if slugs change).
+- CR2: Maintain database schema and NextAuth integration; no breaking changes to auth flows.
+- CR3: UI/UX consistency with new tokens without breaking existing admin functions.
+- CR4: Integration compatibility with current API routes (/api/*) and Prisma models.
+

docs/prd/05-ui-goals.md

@@ -0,0 +1,17 @@
+UI Enhancement Goals
+
+Integration with Existing UI
+- Adopt Tailwind design tokens via CSS variables layered on current config; refactor shadcn components to consume tokens.
+- Consolidate color usage to a dark‑first palette (brand black/orange + neutrals) per brainstorming doc. [Confirmed]
+- Typography: Headings Rajdhani 600/700; Body Kanit 400/500. [Confirmed]
+
+Modified/New Screens and Views
+- Global: Layout with Sidebar Nav (not collapsible) and Command Palette; Footer.
+- Projects: Reel, Case Studies index (filters: type/tool/year), Case Study detail.
+- Process: Pipeline, Tools, Infrastructure.
+- Studio: About, Team, Values.
+- Contact: Smart Form + Confirmation page.
+
+UI Consistency Requirements
+- Tokenized spacing scale; motion presets; focus rings; media player wrapper for consistency.
+- Sticky Split pattern components and hooks as a shared lib; mobile fallbacks and reduced‑motion support.

docs/prd/06-technical.md

@@ -0,0 +1,32 @@
+Technical Constraints and Integration Requirements
+
+Existing Technology Stack
+- Languages: TypeScript
+- Frameworks: Next.js 15 (App Router), React 19, TailwindCSS
+- Database: Prisma (SQLite/Postgres depending on env), NextAuth; optional Cloudflare D1 for contact submissions [Approved]
+- Infrastructure: Next build/start, Sentry for monitoring; no infra files for Vercel/CI in repo
+- External Dependencies: framer-motion/motion, lenis, uploadthing, shadcn primitives, zod, react-hook-form
+
+Integration Approach
+- Database Integration Strategy: No schema changes required; augment only content display and forms; ensure Contact writes via existing patterns or route additions without breaking Prisma clients.
+- API Integration Strategy: Reuse /api/* routes; add new endpoints cautiously (e.g., contact submissions) and version if needed. For contact persistence, allow optional integration with a Cloudflare Worker/D1 via server-side fetch, without impacting existing Prisma schema.
+- Frontend Integration Strategy: Introduce tokens and new components incrementally; gate behind feature flags if needed; refactor pages to consume tokens with minimal churn.
+- Testing Integration Strategy: Component tests for tokens and Sticky Split mechanics; route smoke tests; accessibility checks; performance snapshots.
+
+Code Organization and Standards
+- File Structure Approach: Keep src/app/* routes; add shared components under src/components/ui/* and src/components/patterns/sticky-split/*.
+- Naming Conventions: PascalCase for components, kebab for route segments, token names as --bh-*.
+- Coding Standards: ESLint + Prettier existing; maintain strict TS; avoid one‑off inline styles.
+- Documentation Standards: Co-locate README.md per component/pattern for usage; update main docs after shard.
+
+Deployment and Operations
+- Build Process Integration: Ensure no increase in warnings; tree-shake unused fonts/components.
+- Deployment Strategy: Incremental deploys; feature flags if needed; maintain redirects for IA adjustments.
+- Monitoring and Logging: Extend Sentry breadcrumbs for navigation and key CTA events.
+- Configuration Management: .env unchanged; add envs for contact handling only if required (e.g., Cloudflare credentials, D1 binding endpoint).
+
+Risk Assessment and Mitigation
+- Technical Risks: Global style regressions; performance drops from animation; font loading flashes.
+- Integration Risks: Breaking admin routes/layouts; IA changes affecting deep links.
+- Deployment Risks: CSS purge issues; caching of old assets.
+- Mitigation Strategies: Token gating and gradual rollout; perf budgets (CLS/LCP targets); redirects and manual QA script; font preloading.

docs/prd/07-epic-stories.md

@@ -0,0 +1,95 @@
+Epic and Story Structure
+
+Epic Structure Decision: Single epic focused on UX/UI unification with sequenced, low‑risk increments. [Confirmed]
+
+Epic 1: UX/UI Unification and Core Pages
+- Epic Goal: Unify design system and IA, implement reusable patterns, and elevate core pages while preserving existing functionality.
+- Integration Requirements: Each story verifies non‑regression on existing routes and key interactions; redirects for IA changes; accessibility and performance checks included.
+
+Story 1.1 Design Tokens and Typography
+As a visitor, I want a cohesive visual language so that the site feels premium and consistent.
+- Acceptance Criteria
+  1. Global CSS variables for color, spacing, radii, shadows, and motion exist and are documented.
+  2. Headline font and body font applied globally; extraneous fonts removed.
+  3. Tailwind config consumes tokens; shadcn primitives reflect tokens.
+- Integration Verification
+  - IV1: No layout regressions in /projects, /faq, /contact.
+  - IV2: Admin pages remain functional and readable.
+  - IV3: Performance: no >10% increase in CSS/JS bundle.
+
+Story 1.2 Global Layout, Sidebar Nav, Command Palette
+As a user, I want clear navigation so that I can find Projects, Process, Studio, and Contact quickly.
+- Acceptance Criteria
+  1. Sidebar navigation (persistent 240px; not collapsible) groups routes as defined.
+  2. Command palette opens via Cmd/Ctrl+K with navigation to key routes.
+  3. Footer includes minimal links; responsive behavior verified.
+- Integration Verification
+  - IV1: Deep links to existing /projects/[id] still resolve.
+  - IV2: Keyboard navigation and focus order preserved.
+  - IV3: No layout shift >0.1 CLS on nav open/close.
+
+Story 1.3 Sticky Split Pattern Library
+As a storyteller, I want a sticky split component so that narrative and media synchronize during scroll.
+- Acceptance Criteria
+  1. <StickySplit.Section/Sticky/Track/Panel> components implemented with docs.
+  2. Reduced‑motion mode disables heavy animations gracefully.
+  3. Mobile layout stacks content; performance budget respected.
+- Integration Verification
+  - IV1: No scroll‑jacking; passive listeners only.
+  - IV2: A11y tree/focus unaffected.
+  - IV3: Frame budget within 16ms on mid‑range devices.
+
+Story 1.4 Projects Section Revamp
+As a prospect, I want a Reel and clear Case Studies so that I can assess capability fast.
+- Acceptance Criteria
+  1. /projects index offers Reel + Case Studies tabs with filters.
+  2. Case Study detail template with hero, problem, approach, pipeline, results, credits, CTA.
+  3. Media player wrapper standardized.
+- Integration Verification
+  - IV1: Existing project data remains valid.
+  - IV2: SEO: titles/descriptions preserved or migrated.
+  - IV3: Page renders within current TTFB/LCP budgets.
+
+Story 1.5 Process Pages
+As a technical stakeholder, I want pipeline/tools/infrastructure pages so that I understand reliability and stack.
+- Acceptance Criteria
+  1. /process/{pipeline,tools,infrastructure} pages implemented with sticky split or light reveals.
+  2. Badge and icon components for stack and capabilities.
+  3. Cross‑links to Projects and Contact.
+- Integration Verification
+  - IV1: No regressions to other routes.
+  - IV2: A11y checks pass.
+  - IV3: Bundle size growth <10% vs prior story.
+
+Story 1.6 Studio Pages
+As a partner, I want About, Team, and Values so that I can understand ethos and people.
+- Acceptance Criteria
+  1. /studio/{about,team,values} with content placeholders.
+  2. Quote/testimonial and logo wall optional components.
+  3. Global tokens applied.
+- Integration Verification
+  - IV1: Nav and links correct.
+  - IV2: No console errors.
+  - IV3: Lighthouse a11y ≥ 90.
+
+Story 1.7 Contact Smart Form
+As an inquirer, I want a guided contact form so that I can convey project essentials quickly.
+- Acceptance Criteria
+  1. Fields: project type, timeline, budget range, references/links; validation via zod.
+  2. Success page with next steps/SLA.
+  3. Optional route to persist submissions (or email integration) without breaking existing auth.
+- Integration Verification
+  - IV1: Rate limiting or basic abuse mitigation.
+  - IV2: Error states accessible and clear.
+  - IV3: No PII leakage in logs.
+
+Story 1.8 Hardening: Performance, Accessibility, SEO
+As a steward, I want the site to be fast and accessible so that it reflects professional standards.
+- Acceptance Criteria
+  1. CLS < 0.1; LCP within target for hero pages; images lazy‑loaded.
+  2. Keyboard navigation across all interactive elements; visible focus rings.
+  3. Sentry breadcrumbs for nav/CTA; basic event tracking for key flows.
+- Integration Verification
+  - IV1: Compare metrics to pre‑enhancement baselines.
+  - IV2: No new 4xx/5xx in Sentry after launch.
+  - IV3: Sitemap/robots updated if IA changed.

docs/prd/08-nfr.md

@@ -0,0 +1,7 @@
+Non‑Functional Requirements (NFR)
+
+- Accessibility: Respect prefers-reduced-motion; maintain focus order; ARIA where needed.
+- Performance: No story may increase bundle size by >10% without explicit approval.
+- Reliability: No breaking changes to existing APIs or auth; error boundaries for new components.
+- Observability: Sentry enabled across new interactions; console clean.
+

docs/prd/09-open-questions.md

@@ -0,0 +1,8 @@
+Decisions (Resolved)
+
+- Typography: Rajdhani (600/700) headings, Kanit (400/500) body — Approved.
+- Brand palette: Dark‑first black/orange + neutrals — Approved.
+- Navigation: Left sidebar (240px), not collapsible + Command Palette — Approved.
+- IA routes: /projects, /process, /studio, /contact with listed children — Approved.
+- Epic structure: Single-epic with Story 1.1 → 1.8 — Approved.
+- Contact handling: Persist submissions allowed; Cloudflare D1 acceptable; no compliance constraints — Approved.

docs/stories/1.1.design-tokens-and-typography.md

@@ -0,0 +1,93 @@
+Status
+
+Draft
+
+Story
+
+**As a** visitor,
+**I want** a cohesive visual language,
+**so that** the site feels premium and consistent.
+
+Acceptance Criteria
+
+1. Global CSS variables for color, spacing, radii, shadows, and motion exist and are documented.
+2. Headline font and body font applied globally; extraneous fonts removed.
+3. Tailwind config consumes tokens; shadcn primitives reflect tokens.
+
+Tasks / Subtasks
+
+- [ ] Define and align design tokens (AC: 1, 3)
+  - [ ] Audit existing tokens in `src/app/globals.css` (surface/text/brand, spacing, radius, transitions)
+  - [ ] Update palette to dark-first black/orange + neutrals per PRD; keep aliases for backward compat where needed
+  - [ ] Add motion presets and shadow tokens if missing; ensure `--radius` aligns with Tailwind theme.borderRadius
+  - [ ] Document token usage in a short README at `src/components/ui/README.md`
+- [ ] Apply typography pairing globally (AC: 2)
+  - [ ] In `src/app/layout.tsx:body`, set Kanit as base text font; Rajdhani for headings via utility/class
+  - [ ] Remove unused fonts (DM Serif, Bentham, Share) from layout font variables and any CSS usages
+  - [ ] Ensure weights available: Rajdhani 600/700 for headings; Kanit 400/500 for body
+  - [ ] Update `src/app/globals.css` heading selectors to use Rajdhani
+- [ ] Tailwind + shadcn integration (AC: 3)
+  - [ ] Map Tailwind theme colors to CSS vars (already partially done); ensure components read from vars
+  - [ ] Set Tailwind `fontFamily` to prefer CSS vars (e.g., body → Kanit, display → Rajdhani) where appropriate
+  - [ ] Verify shadcn primitives reflect tokenized colors, radius, and motion
+- [ ] Regression and quality checks
+  - [ ] Lint passes: `npm run lint`
+  - [ ] Build passes: `npm run build`
+  - [ ] Visual smoke check `/projects`, `/faq`, `/contact` for layout/regressions (Integration Verification IV1)
+  - [ ] Admin pages readable and functional (IV2)
+  - [ ] Bundle size does not grow >10% vs baseline; note result in Completion Notes (IV3)
+
+Dev Notes
+
+- Context
+  - PRD: docs/prd.md (Ready). Story 1.1 targets tokens + typography; sidebar choice does not affect this story.
+  - Typography pairing approved: Headings Rajdhani 600/700; Body Kanit 400/500.
+  - Palette direction approved: dark-first black/orange + neutrals.
+- Relevant Source Tree
+  - Layout file: src/app/layout.tsx:1 — loads multiple local fonts and assigns body class variables.
+  - Global styles: src/app/globals.css:1 — defines CSS variables and sets current fonts (Bentham, DM Serif for headings).
+  - Tailwind config: tailwind.config.ts:1 — maps theme colors to CSS vars; sets font families (currently Inter/Cal Sans defaults).
+  - Shared components likely to reflect tokens: src/components/* (e.g., Buttons/Forms use radius/colors).
+- Required Changes (high level)
+  - Remove DM Serif, Bentham, Share font variables from body class list in layout; keep Rajdhani and Kanit only.
+  - Switch body font-family in globals.css to `var(--font-kanit)`, headings h1–h3 to `var(--font-rajdhani)`.
+  - Ensure Tailwind `fontFamily` values either include CSS variable driven stacks or rely on element selectors; do not regress shadcn styles.
+  - Tokenize any hardcoded colors in components if encountered while verifying ACs (limit scope to token plumbing, not a full refactor).
+
+Testing
+
+- Standards
+  - Use existing linting (ESLint + Prettier) and Next build as gates; no unit test framework present in repo.
+  - Accessibility: verify visible focus rings remain; respect prefers-reduced-motion (no changes expected in this story).
+  - Performance: capture approximate bundle size before/after with `next build` output; ensure <10% growth.
+- Manual Checks
+  - Pages: `/projects`, `/faq`, `/contact`, `/admin/*` render without font fallback flashes and with expected fonts.
+  - Visual: Headings visibly using Rajdhani, body using Kanit.
+
+Change Log
+
+| Date | Version | Description | Author |
+|------|---------|-------------|--------|
+| 2025-09-24 | v1 | Initial draft from PRD Story 1.1 | Scrum Master |
+
+Dev Agent Record
+
+Agent Model Used
+
+{{agent_model_name_version}}
+
+Debug Log References
+
+
+
+Completion Notes List
+
+
+
+File List
+
+
+
+QA Results
+
+

docs/stories/1.2.global-layout-sidebar-nav-command-palette.md

@@ -0,0 +1,98 @@
+Status
+
+Approved
+
+Story
+
+**As a** user,
+**I want** clear global navigation and a command palette,
+**so that** I can find Projects, Process, Studio, and Contact quickly.
+
+Acceptance Criteria
+
+1. Sidebar navigation (persistent 240px; not collapsible) groups routes as defined.
+2. Command palette opens via Cmd/Ctrl+K with navigation to key routes.
+3. Footer includes minimal links; responsive behavior verified.
+
+Tasks / Subtasks
+
+- [ ] Implement Global Sidebar (AC: 1)
+  - [ ] Create `src/components/GlobalSidebar.tsx` with fixed left sidebar width 240px; not collapsible
+  - [ ] Nav groups: Projects, Process, Studio, Contact; include sublinks only for existing pages to avoid 404s
+  - [ ] Active route highlighting using `usePathname()`; keyboard focus states visible
+  - [ ] Add brand/title area and optional small logo at top; keep minimal
+  - [ ] Ensure Admin routes continue to use existing `AdminSidebar` and hide GlobalSidebar on `/admin/*`
+- [ ] Integrate Sidebar into Layout (AC: 1, 3)
+  - [ ] Update `src/app/layout.tsx` to render `GlobalSidebar` on public routes
+  - [ ] Wrap page content in a container with `padding-left: 240px` (md+) to account for fixed sidebar
+  - [ ] Keep `Footer` rendered; verify layout rhythm with tokens
+  - [ ] Remove or disable `Navigation` pill nav on public routes (it is redundant with sidebar)
+- [ ] Implement Command Palette — minimal, no new deps (AC: 2)
+  - [ ] Create `src/components/CommandPalette.tsx` as a lightweight overlay using React state and tokenized styles (no new dependency)
+  - [ ] Register global hotkey `Cmd/Ctrl+K` to toggle; `ESC` closes; use focus trap with native techniques and ARIA attributes
+  - [ ] Commands: navigate to top-level routes and key admin entry (if authenticated)
+  - [ ] Fuzzy filter: simple case-insensitive `includes` across labels and paths (acceptable MVP)
+  - [ ] Mount globally via `src/components/Providers.tsx` or `src/app/layout.tsx`
+- [ ] Responsive and A11y
+  - [ ] On small screens, layout stacks with sidebar appearing as a static top section or off-canvas; no collapse control required
+  - [ ] Ensure keyboard navigation order is logical: body → sidebar → content → footer; visible focus rings
+  - [ ] No layout shift > 0.1 CLS when interacting with palette
+- [ ] Regression and quality checks
+  - [ ] Lint passes: `npm run lint`
+  - [ ] Build passes: `npm run build`
+  - [ ] Deep links to existing `/projects/[id]` still resolve (IV1)
+  - [ ] Keyboard navigation and focus order preserved (IV2)
+  - [ ] No CLS > 0.1 on nav open/close; document evidence (IV3)
+
+Dev Notes
+
+- Context
+  - PRD Story 1.2 acceptance confirmed; sidebar must not be collapsible.
+  - Keep Admin area behavior: `Navigation` currently hides on `/admin/*`; Admin uses `AdminSidebar`.
+- Relevant Source Tree
+  - Layout: src/app/layout.tsx:1 — renders `Navigation`, `Footer`, and `<Providers />`.
+  - Navigation: src/components/Navigation.tsx:1 — floating pill nav (to be replaced on public routes).
+  - Admin Sidebar: src/components/Navigation.tsx (export `AdminSidebar`) — serves as reference for sidebar styles/structure.
+  - Providers: src/components/Providers.tsx — global context location; suitable to mount command palette provider if needed.
+- Implementation Guidance
+  - Sidebar width constant: 240px; token-friendly classes using Tailwind spacing if desired.
+  - Use existing surface/text token classes (e.g., `bg-surface-900`, `text-text-muted`).
+  - Command Palette: if no command component installed, prefer `cmdk` or `@radix-ui/react-dialog` + custom list; keep dependency minimal. Confirm with PO before adding new deps if needed.
+  - Ensure `Navigation` pill nav is removed/hidden to avoid duplicate nav elements.
+
+Testing
+
+- Manual
+  - Verify sidebar present on `/`, `/projects`, `/faq`, `/contact` and not present on `/admin/*`.
+  - Keyboard: Tab through sidebar links and palette; ESC closes palette; Cmd/Ctrl+K toggles.
+  - Mobile: No broken layout; sidebar not required to collapse but must not obstruct content.
+- Metrics
+  - CLS during palette interaction ≤ 0.1.
+  - Build artifacts show no significant increase; note any added dependency and size impact.
+
+Change Log
+
+| Date | Version | Description | Author |
+|------|---------|-------------|--------|
+| 2025-09-24 | v1 | Initial draft from PRD Story 1.2 | Scrum Master |
+
+Dev Agent Record
+
+Agent Model Used
+
+{{agent_model_name_version}}
+
+Debug Log References
+
+
+
+Completion Notes List
+
+
+
+File List
+
+
+
+QA Results
+

docs/stories/1.3.sticky-split-pattern-library.md

@@ -0,0 +1,107 @@
+Status
+
+Draft
+
+Story
+
+**As a** storyteller,
+**I want** a sticky split component,
+**so that** narrative and media synchronize during scroll.
+
+Acceptance Criteria
+
+1. <StickySplit.Section/Sticky/Track/Panel> components implemented with docs.
+2. Reduced‑motion mode disables heavy animations gracefully.
+3. Mobile layout stacks content; performance budget respected.
+
+Tasks / Subtasks
+
+- [ ] Scaffold pattern components (AC: 1)
+  - [ ] Create folder `src/components/patterns/sticky-split/`
+  - [ ] Add files: `Section.tsx`, `Sticky.tsx`, `Track.tsx`, `Panel.tsx`, `index.ts`
+  - [ ] Export namespaced API: `StickySplit = { Section, Sticky, Track, Panel }`
+  - [ ] Define props:
+    - Section: `{ id: string; height?: string | number; side?: 'left'|'right'; className?: string }`
+    - Sticky: `{ offset?: string; className?: string }`
+    - Track: `{ className?: string }`
+    - Panel: `{ index: number; inVariants?: Variants; outVariants?: Variants; className?: string }`
+  - [ ] Provide sensible defaults: `height='200vh'`, `side='left'`, sticky `offset='var(--sticky-top, 8vh)'`
+- [ ] Progress computation (AC: 1)
+  - [ ] Implement `useSectionProgress(id)` in `src/components/patterns/sticky-split/useSectionProgress.ts`
+  - [ ] Use `IntersectionObserver` on Section root to compute 0..1 progress across its scroll range
+  - [ ] Ensure passive listeners only; no wheel/touch blocking; avoid scroll‑jacking
+- [ ] Animation integration (AC: 1)
+  - [ ] Use `framer-motion` `motion.div` inside `Panel` and map `progress` to opacity/transform via `useTransform`
+  - [ ] Add optional `inVariants/outVariants` props; default to subtle fade/scale
+- [ ] Reduced motion (AC: 2)
+  - [ ] Use `useReducedMotion()` from framer‑motion; if true, disable transforms and show panels as static stack
+- [ ] Mobile layout + fallbacks (AC: 3)
+  - [ ] Apply responsive CSS: below `md`, stack vertically; disable sticky; panels visible with light reveal‑on‑view (IO add/remove `is-visible` class)
+  - [ ] Above `md`, two‑column grid with left sticky narrative and right scroll track; allow `side='right'` to invert
+- [ ] Tokens and base styles (AC: 1,3)
+  - [ ] Define CSS vars in `src/app/globals.css`: `--sticky-top`, `--panel-gap`, `--reveal-duration`, `--reveal-ease`
+  - [ ] Provide utility classes for the pattern container grid and gaps using Tailwind + CSS vars
+- [ ] Documentation & example (AC: 1)
+  - [ ] Add `src/components/patterns/sticky-split/README.md` with usage, props, and examples
+  - [ ] Include a small demo component `Demo.tsx` showcasing 3 panels; do not add a new route in this story
+- [ ] Quality gates & perf
+  - [ ] Lint passes: `npm run lint`
+  - [ ] Build passes: `npm run build`
+  - [ ] Verify no main thread jank on mid‑range device; keep frame budget ≈16ms for panel transitions
+  - [ ] Confirm passive listeners; no prevention of native scroll
+
+Dev Notes
+
+- Context
+  - Derived from PRD Story 1.3. Target: reusable pattern inspired by “Basement Foundry” style; no scroll‑jacking.
+  - Typography and tokens are handled in Story 1.1; this story may add a few CSS vars specific to the pattern.
+- Relevant Source Tree
+  - Component home: `src/components/patterns/sticky-split/*`
+  - Tailwind/CSS tokens: `src/app/globals.css`, `tailwind.config.ts`
+  - Motion libs: `framer-motion`/`motion` available in dependencies.
+- Implementation Guidance
+  - Section renders a responsive two‑column grid (`md:grid md:grid-cols-2`) with a fixed sticky column and a scrolling track column; swap order with `side`.
+  - Sticky uses `position: sticky; top: var(--sticky-top)` and inherits tokenized spacing/gap via CSS vars.
+  - Track holds `Panel` children; each Panel uses the section progress (or per‑panel thresholds like `index / (N-1)`) to compute in/out.
+  - Reduced motion: early return static markup; prefer opacity reveals without transforms.
+  - Accessibility: preserve DOM order for reading; keep focusable content reachable; avoid trapping focus.
+  - Performance: avoid large fixed layers; prefer `will-change: transform` only while animating; lazy‑load media inside panels.
+
+Testing
+
+- Manual
+  - With default motion: panels fade/transform smoothly as the section scrolls; no scroll blocking.
+  - With `prefers-reduced-motion`: panels render as static stack; no transforms/animations.
+  - Mobile: stacked layout; sticky disabled; content readable and navigable.
+- Perf
+  - Inspect Chrome Performance or DevTools frame rate timeline; verify transitions stay near 60fps on typical hardware.
+- A11y
+  - Keyboard navigation reaches all interactive elements inside Sticky and Track; focus order logical.
+
+Change Log
+
+| Date | Version | Description | Author |
+|------|---------|-------------|--------|
+| 2025-09-24 | v1 | Initial draft from PRD Story 1.3 | Scrum Master |
+
+Dev Agent Record
+
+Agent Model Used
+
+{{agent_model_name_version}}
+
+Debug Log References
+
+
+
+Completion Notes List
+
+
+
+File List
+
+
+
+QA Results
+
+

docs/stories/1.4.projects-section-revamp.md

@@ -0,0 +1,98 @@
+Status
+
+Approved
+
+Story
+
+**As a** prospect,
+**I want** a Reel and clear Case Studies,
+**so that** I can assess capability fast.
+
+Acceptance Criteria
+
+1. `/projects` index offers Reel + Case Studies tabs with filters.
+2. Case Study detail template with hero, problem, approach, pipeline, results, credits, CTA.
+3. Media player wrapper standardized.
+4. Reel asset source uses explicit priority order: prefer `projects.reel.video` → then `projects.reel.embed` → then fallback `projects.hero.image`.
+5. Defaults are clear and testable: initial tab = Case Studies; filters default to All (no category/year/search applied); selected tab and filters reflected in URL query params.
+
+Tasks / Subtasks
+
+- [ ] Projects Index: Tabs + Filters (AC: 1)
+  - [ ] Update `src/app/projects/ProjectsPageClient.tsx` to render two tabs: "Reel" and "Case Studies"; default tab = Case Studies
+  - [ ] Reel tab: show a featured hero reel using asset priority: `projects.reel.video` → `projects.reel.embed` → `projects.hero.image` (fallback), via MediaPlayer wrapper
+  - [ ] Case Studies tab: grid/list using existing `ProjectGrid` or current card layout; integrate filters: Category, Year (from `createdAt`), and a text Search; default filters = All
+  - [ ] Persist selected tab and filters in URL query params (e.g., `?tab=case-studies&category=...&year=...&q=...`)
+  - [ ] Ensure server data fetch in `src/app/projects/page.tsx` still passes through; client filters run on received data without extra queries
+
+- [ ] Case Study Detail Template Enhancements (AC: 2)
+  - [ ] In `src/app/projects/[id]/ProjectPageClient.tsx`, introduce section layout: Hero → Problem → Approach → Pipeline Highlights → Results → Credits → CTA
+  - [ ] Map to existing fields without schema changes: use `info` for Problem/Approach/Pipeline/Results via subheadings if markdown; keep Credits as is
+  - [ ] Add a CTA block at end (e.g., Link to `/contact`) styled with token classes
+  - [ ] Replace inline video/embed rendering with MediaPlayer wrapper component
+  - [ ] Maintain existing SEO metadata in `[id]/page.tsx`
+
+- [ ] Media Player Wrapper (AC: 3)
+  - [ ] Create `src/components/media/MediaPlayer.tsx` that accepts: `{ video?: string; embed?: string; poster?: string; className?: string }`
+  - [ ] Standardize controls, aspect ratio, poster overlay, and mute/autoplay policy; integrate `useAutoplayVideos` for in-view playback when muted
+  - [ ] Support iframe embeds safely with required attributes; fall back to poster image
+  - [ ] Replace usages in Project detail and Reel tab
+
+- [ ] Quality and Integration Verification
+  - [ ] Lint/build pass: `npm run lint` / `npm run build`
+  - [ ] IV1: Existing project data remains valid; no runtime errors if fields missing
+  - [ ] IV2: SEO titles/descriptions preserved or improved (no regressions in `generatePageMetadata`)
+  - [ ] IV3: Page LCP/TTFB within current budgets; avoid heavy client work on first paint; lazy-load media
+
+Dev Notes
+
+- Context
+  - PRD Story 1.4. No DB schema changes; use current fields (`category`, `tags`, `createdAt`, `video`, `embed`, `thumbnail`, `info`, `credits`).
+  - Standardize media with a wrapper used in both index (Reel) and detail.
+- Relevant Source Tree
+  - Index: `src/app/projects/page.tsx`, `src/app/projects/ProjectsPageClient.tsx`
+  - Detail: `src/app/projects/[id]/page.tsx`, `src/app/projects/[id]/ProjectPageClient.tsx`
+  - Components: `src/components/ProjectGrid.tsx`, `src/components/ScrollEnhancements.tsx`, `src/components/motion/useAutoplayVideos.ts`
+  - Assets/Metadata: `src/lib/metadata.ts`, `src/lib/assets.ts`, Prisma models in `prisma/*`
+- Implementation Guidance
+  - Tabs can be simple client state with tokens; no dependency on heavy UI libs necessary.
+  - Filters operate on the in-memory list from server; for Year, derive from `createdAt`.
+  - If markdown present in `info`/`credits`, `MarkdownContent` already used in detail; leverage for subheadings.
+  - Keep accessibility: keyboard focus, visible focus rings, no scroll-jacking.
+
+Testing
+
+- Manual
+  - `/projects`: switching tabs does not remount unnecessarily; URL reflects current tab/filters.
+  - Filters: combining Category + Year + Search updates the grid correctly; clearing filters resets view.
+  - Detail page: sections render with meaningful headings; CTA routes to `/contact`.
+- Regression
+  - Deep-links to existing `/projects/[id]` still function.
+  - No console errors/warnings introduced.
+  - Media playback behaves consistently and does not auto-play with sound.
+
+Change Log
+
+| Date | Version | Description | Author |
+|------|---------|-------------|--------|
+| 2025-09-24 | v1 | Initial draft from PRD Story 1.4 | Scrum Master |
+
+Dev Agent Record
+
+Agent Model Used
+
+{{agent_model_name_version}}
+
+Debug Log References
+
+
+
+Completion Notes List
+
+
+
+File List
+
+
+
+QA Results

docs/stories/1.5.process-pages.md

@@ -0,0 +1,92 @@
+Status
+
+Draft
+
+Story
+
+**As a** technical stakeholder,
+**I want** pipeline/tools/infrastructure pages,
+**so that** I understand reliability and stack.
+
+Acceptance Criteria
+
+1. `/process/{pipeline,tools,infrastructure}` pages implemented with sticky split or light reveals.
+2. Badge and icon components for stack and capabilities.
+3. Cross‑links to Projects and Contact.
+
+Tasks / Subtasks
+
+- [ ] Create Process Route Group (AC: 1)
+  - [ ] Add directories: `src/app/process/pipeline`, `src/app/process/tools`, `src/app/process/infrastructure`
+  - [ ] Each with `page.tsx` implementing a top section and content blocks
+  - [ ] Use `StickySplit` pattern from Story 1.3 when available; until then, use light `IntersectionObserver` reveals
+- [ ] Pipeline Page (AC: 1, 3)
+  - [ ] Content outline: Ingest → Tracking → FX → Lighting → Comp → Review; each as a Panel/Section
+  - [ ] Include a small stepper or numbered headings; use token colors and spacing
+  - [ ] Cross‑links: CTA buttons to `/projects` and `/contact`
+- [ ] Tools Page (AC: 1, 2, 3)
+  - [ ] Content outline: Houdini, Nuke, Unreal, Custom pipeline; brief capability notes
+  - [ ] Implement `Badge` component for tool tags: `src/components/ui/Badge.tsx` or utility class; tokenized colors
+  - [ ] Optional icon grid using Tabler icons already in repo (`@tabler/icons-react`)
+  - [ ] Cross‑links to Projects/Contact
+- [ ] Infrastructure Page (AC: 1, 2, 3)
+  - [ ] Content outline: Render, Storage, Automation/CI for assets; reliability notes
+  - [ ] Use badges for capability indicators (e.g., GPU, caching, versioning)
+  - [ ] Cross‑links to Projects/Contact
+- [ ] A11y and Responsive
+  - [ ] Mobile stacks; if StickySplit used, disable sticky on small screens
+  - [ ] Keyboard focus order logical; visible focus rings; headings structured (h1→h2→h3)
+- [ ] Quality and Integration Verification
+  - [ ] Lint/build pass: `npm run lint` / `npm run build`
+  - [ ] IV1: No regressions to other routes
+  - [ ] IV2: A11y checks pass (landmarks, headings, focus ring)
+  - [ ] IV3: Bundle size growth <10% vs prior story
+
+Dev Notes
+
+- Context
+  - PRD Story 1.5. New route group; no backend changes required.
+  - Prefer `StickySplit` components if Story 1.3 is implemented first; otherwise keep implementation simple.
+- Relevant Source Tree
+  - New routes: `src/app/process/*`
+  - Components: `src/components/Navigation.tsx` (reference AdminSidebar styles), `src/components` for potential reuse
+  - Icons: `@tabler/icons-react` already in dependencies
+- Implementation Guidance
+  - Keep copy concise; use tokens for surface and text colors
+  - Reuse button styles for CTAs; ensure links include descriptive aria-labels
+
+Testing
+
+- Manual
+  - Verify each page renders and links to `/projects` and `/contact`
+  - StickySplit (if used) respects reduced-motion and does not block native scroll
+- Regression
+  - Ensure new routes do not affect existing `/projects` or admin behavior
+
+Change Log
+
+| Date | Version | Description | Author |
+|------|---------|-------------|--------|
+| 2025-09-24 | v1 | Initial draft from PRD Story 1.5 | Scrum Master |
+
+Dev Agent Record
+
+Agent Model Used
+
+{{agent_model_name_version}}
+
+Debug Log References
+
+
+
+Completion Notes List
+
+
+
+File List
+
+
+
+QA Results
+
+

docs/stories/1.6.studio-pages.md

@@ -0,0 +1,85 @@
+Status
+
+Draft
+
+Story
+
+**As a** partner,
+**I want** About, Team, and Values pages,
+**so that** I can understand ethos and people.
+
+Acceptance Criteria
+
+1. `/studio/{about,team,values}` with content placeholders.
+2. Quote/testimonial and logo wall optional components.
+3. Global tokens applied.
+
+Tasks / Subtasks
+
+- [ ] Create Studio Route Group (AC: 1)
+  - [ ] Add directory `src/app/studio` and subroutes: `about/page.tsx`, `team/page.tsx`, `values/page.tsx`
+  - [ ] Use shared layout from root; ensure pages inherit global tokens and typography
+- [ ] About Page (AC: 1, 3)
+  - [ ] Compose mission and ethos sections using tokens (`text-text-muted`, `bg-surface-*`)
+  - [ ] Optionally include `AboutSection` if suitable; otherwise lightweight copy with imagery placeholder
+- [ ] Team Page (AC: 1, 2, 3)
+  - [ ] Leverage existing `CrewSection` and/or create simple team grid from available data or placeholder cards
+  - [ ] Include an optional testimonials area using `TestimonialsSection`
+- [ ] Values Page (AC: 1, 2, 3)
+  - [ ] Present values (e.g., Meticulous, Robust, Collaborative, Artist‑first) as tokenized badges or cards
+  - [ ] Optional “logo wall” placeholder if client logos are available later; keep component minimal and accessible
+- [ ] Navigation and Cross‑links
+  - [ ] Ensure new routes are linked from global sidebar (Story 1.2) and footer
+  - [ ] CTAs to `/projects` and `/contact` where appropriate
+- [ ] Quality and Integration Verification
+  - [ ] Lint/build pass: `npm run lint` / `npm run build`
+  - [ ] IV1: Nav and links correct (no broken routes)
+  - [ ] IV2: No console errors/warnings in runtime
+  - [ ] IV3: Lighthouse a11y ≥ 90 on these pages (headings/landmarks/focus)
+
+Dev Notes
+
+- Context
+  - PRD Story 1.6. New route group `/studio` with three pages; content can be placeholders styled with tokens.
+- Relevant Source Tree
+  - Components available: `src/components/TestimonialsSection.tsx`, `src/components/CrewSection.tsx`, `src/components/AboutSection.tsx`
+  - Global styles/tokens: `src/app/globals.css`; layout: `src/app/layout.tsx`
+- Implementation Guidance
+  - Keep copy concise; use semantic headings (h1 per page, h2 for sections)
+  - Use existing token classes for surfaces, text, spacing; avoid inline styles
+  - If data for team is not available, structure components to accept props later; ship with placeholder items
+
+Testing
+
+- Manual
+  - Load `/studio/about`, `/studio/team`, `/studio/values`; verify typography and tokens applied
+  - Keyboard navigation across interactive elements; visible focus rings
+  - Links to `/projects` and `/contact` functional
+
+Change Log
+
+| Date | Version | Description | Author |
+|------|---------|-------------|--------|
+| 2025-09-24 | v1 | Initial draft from PRD Story 1.6 | Scrum Master |
+
+Dev Agent Record
+
+Agent Model Used
+
+{{agent_model_name_version}}
+
+Debug Log References
+
+
+
+Completion Notes List
+
+
+
+File List
+
+
+
+QA Results
+
+

docs/stories/1.7.contact-smart-form.md

@@ -0,0 +1,93 @@
+Status
+
+Approved
+
+Story
+
+**As an** inquirer,
+**I want** a guided contact form,
+**so that** I can convey project essentials quickly.
+
+Acceptance Criteria
+
+1. Fields: project type, timeline, budget range, references/links; validation via zod.
+ 2. Success page with next steps/SLA.
+ 3. Optional route to persist submissions (or email integration) without breaking existing auth.
+4. API response contract is explicit and enforced: returns JSON `{ ok: boolean, message?: string }` on both success and error.
+5. Basic server-side abuse mitigation in place: rate limiting of 5 requests per minute per client IP with appropriate error messaging in the response shape.
+
+Tasks / Subtasks
+
+- [ ] Form fields and validation (AC: 1)
+  - [ ] Extend `src/app/contact/page.tsx` with fields: `projectType` (select), `timeline` (select or free text), `budgetRange` (select), `references` (textarea or list of URLs)
+  - [ ] Convert to React Hook Form + Zod schema for client-side validation; enforce valid email and optional URL list parsing
+  - [ ] Keep existing first/last/subject/message fields; align labels and helper text with tokens
+- [ ] Submission handling (AC: 1, 3)
+  - [ ] Replace direct Web3Forms POST with internal API route `src/app/api/contact/route.ts` that forwards to:
+        a) Web3Forms (current behavior) if configured, or
+        b) Cloudflare Worker/D1 endpoint if env vars provided (optional persistence)
+  - [ ] Sanitize inputs server-side; add basic rate limiting (IP-based, 5 requests/minute per IP)
+  - [ ] Return structured JSON `{ ok: boolean, message?: string }`
+- [ ] Success page (AC: 2)
+  - [ ] Add `src/app/contact/success/page.tsx` with confirmation content and what happens next (SLA)
+  - [ ] After successful submission, navigate to `/contact/success` with a minimal state (no PII in URL)
+- [ ] A11y and UX
+  - [ ] Error messaging announced to screen readers; inputs with `aria-invalid` and `aria-describedby`
+  - [ ] Disabled submit state and spinner while submitting; keyboard-friendly focus order
+  - [ ] Privacy note near submit; link to `/privacy`
+- [ ] Quality and Integration Verification
+  - [ ] Lint/build pass: `npm run lint` / `npm run build`
+  - [ ] IV1: Rate limiting or basic abuse mitigation is active (manual check)
+  - [ ] IV2: Error states accessible and clear (screen reader test)
+  - [ ] IV3: No PII leakage in logs (log only metadata, never form body)
+
+Dev Notes
+
+- Context
+  - PRD Story 1.7. Contact page exists and posts to Web3Forms. This story moves submission to an internal API, adds guided fields, and adds a success page. Cloudflare D1 is optional and must not affect Prisma schema.
+- Relevant Source Tree
+  - Contact page: `src/app/contact/page.tsx`
+  - New success page: `src/app/contact/success/page.tsx`
+  - New API: `src/app/api/contact/route.ts` (POST)
+  - Utilities: `src/components/Forms.tsx` (reuse Input/Textarea components); `src/lib/utils.ts`
+- Implementation Guidance
+  - Zod schema example fields: `projectType: enum(['Commercial','Music Video','Narrative','Other'])`, `timeline: string`, `budgetRange: enum(['<10k','10–50k','50–200k','200k+','TBD'])`, `references: string` (parse to URLs), `firstName/lastName/email/subject/message`.
+  - API route: forward payload; for Cloudflare, use `fetch(CF_CONTACT_ENDPOINT, { method:'POST', headers: { Authorization: CF_CONTACT_AUTH, 'Content-Type': 'application/json' }, body })`; do not include secrets in client bundle.
+  - Environment variables: `NEXT_PUBLIC_WEB3FORMS_ACCESS_KEY` (existing), optional `CF_CONTACT_ENDPOINT`, `CF_CONTACT_AUTH`.
+  - Rate limit: simple in-memory map 5/min/IP; acceptable for MVP.
+
+Testing
+
+- Manual
+  - Validation: invalid email blocks submit; references accept comma/newline separated URLs
+  - After success, user lands on `/contact/success`; browser back shows preserved inputs or reset as designed
+  - Privacy and Terms links open and are accessible
+- Regression
+  - Ensure no auth flows are affected; admin pages continue to work
+  - Logs contain no PII
+
+Change Log
+
+| Date | Version | Description | Author |
+|------|---------|-------------|--------|
+| 2025-09-24 | v1 | Initial draft from PRD Story 1.7 | Scrum Master |
+
+Dev Agent Record
+
+Agent Model Used
+
+{{agent_model_name_version}}
+
+Debug Log References
+
+
+
+Completion Notes List
+
+
+
+File List
+
+
+
+QA Results

docs/stories/1.8.hardening-performance-accessibility-seo.md

@@ -0,0 +1,98 @@
+Status
+
+Draft
+
+Story
+
+**As a** steward,
+**I want** the site to be fast and accessible,
+**so that** it reflects professional standards.
+
+Acceptance Criteria
+
+1. CLS < 0.1; LCP within target for hero pages; images lazy‑loaded.
+2. Keyboard navigation across all interactive elements; visible focus rings.
+3. Sentry breadcrumbs for nav/CTA; basic event tracking for key flows.
+
+Tasks / Subtasks
+
+- [ ] Establish baselines and budgets (AC: 1)
+  - [ ] Record current build metrics and bundle size from `next build` (note in Completion Notes)
+  - [ ] Define budgets: CLS < 0.1, LCP within prior baseline (or ≤ 2.5s on desktop), JS/CSS bundle growth ≤ 10%
+- [ ] Font optimization (AC: 1)
+  - [ ] Limit loaded fonts to approved weights: Rajdhani 600/700, Kanit 400/500
+  - [ ] Remove unused local fonts (DM Serif, Bentham, Share) from `src/app/layout.tsx` and global CSS references
+  - [ ] Preload only critical fonts via `next/font/local` (display: 'swap') and avoid redundant weights
+- [ ] Image and media performance (AC: 1)
+  - [ ] Ensure all non-hero images use lazy loading (Next/Image defaults) and appropriate sizes
+  - [ ] Keep hero media `priority` only where necessary to avoid over-fetching
+  - [ ] Audit `ImageWithFallback` to ensure it forwards width/height/priority and uses `loading="lazy"` when not priority
+  - [ ] Defer heavy media; use poster images and avoid auto-play with sound
+- [ ] Motion and reduced-motion (AC: 2)
+  - [ ] Respect `prefers-reduced-motion` globally (CSS and framer-motion hooks) and in StickySplit pattern
+  - [ ] Avoid scroll‑jacking and ensure passive listeners on scroll/IO
+- [ ] Keyboard and focus (AC: 2)
+  - [ ] Verify visible focus outlines on links, buttons, inputs (tokenized focus styles if needed)
+  - [ ] Ensure logical tab order with new GlobalSidebar and CommandPalette; ESC closes palette; aria attributes present
+  - [ ] Add skip-to-content link at top of page
+- [ ] Sentry breadcrumbs and event logging (AC: 3)
+  - [ ] Add lightweight event util in `src/lib/telemetry.ts` to record nav clicks and primary CTAs to Sentry
+  - [ ] Wire into GlobalSidebar link clicks and key CTAs (e.g., Contact CTA on Projects/Process)
+- [ ] SEO and IA updates (AC: 1)
+  - [ ] Update `src/app/sitemap.ts` to include new routes: `/process/*`, `/studio/*`
+  - [ ] Verify metadata titles/descriptions for new pages via `generatePageMetadata`
+- [ ] Quality gates
+  - [ ] Lint/build pass: `npm run lint` / `npm run build`
+  - [ ] Re-measure CLS/LCP after changes; document in Completion Notes; ensure ≤ budget
+  - [ ] Confirm no new 4xx/5xx in Sentry (post-deploy checklist)
+
+Dev Notes
+
+- Context
+  - PRD Story 1.8. Focus on performance, accessibility, and observability. No schema changes.
+  - Sidebar is not collapsible by decision; ensure keyboard and focus handling is robust.
+- Relevant Source Tree
+  - Fonts/Layout: `src/app/layout.tsx:1`, `src/app/globals.css:1`
+  - Images: `src/components/ui/ImageWithFallback.tsx`, usages across pages
+  - Navigation/Sidebar/Palette: `src/components/Navigation.tsx` (AdminSidebar), GlobalSidebar/CommandPalette (Story 1.2)
+  - Metadata/Sitemap: `src/lib/metadata.ts`, `src/app/sitemap.ts`
+  - Sentry: `sentry.client.config.js`, `sentry.server.config.ts`, `sentry.edge.config.ts`
+
+Testing
+
+- Performance
+  - Use `next build` output and browser DevTools (Performance tab) to spot LCP elements and layout shifts
+  - Verify images have correct `sizes` and lazy loading; ensure minimal CLS
+- Accessibility
+  - Keyboard-only navigation across core pages; visible focus, skip link works
+  - Screen reader quick checks (headings/landmarks/labels)
+- Observability
+  - Trigger nav/CTA clicks and confirm breadcrumbs appear in Sentry (locally verify logging calls)
+
+Change Log
+
+| Date | Version | Description | Author |
+|------|---------|-------------|--------|
+| 2025-09-24 | v1 | Initial draft from PRD Story 1.8 | Scrum Master |
+
+Dev Agent Record
+
+Agent Model Used
+
+{{agent_model_name_version}}
+
+Debug Log References
+
+
+
+Completion Notes List
+
+
+
+File List
+
+
+
+QA Results
+
+

docs/stories/checks/1.1.validation.md

@@ -0,0 +1,21 @@
+Story Draft Checklist — 1.1 Design Tokens and Typography
+
+1. Goal & Context Clarity
+- PASS — Clear goal, user value, ties to PRD epic; no external deps.
+
+2. Technical Implementation Guidance
+- PASS — Files and steps called out (layout.tsx, globals.css, tailwind.config.ts). No schema/API changes.
+
+3. Reference Effectiveness
+- PASS — File paths referenced directly; context summarized within story.
+
+4. Self-Containment Assessment
+- PASS — Assumptions explicit (fonts, tokens). Edge cases covered (perf/a11y).
+
+5. Testing Guidance
+- PASS — Lint/build, manual routes, perf budget ≤10% specified.
+
+Final Assessment: READY
+- Clarity score: 9/10
+- Notes: Capture pre/post build sizes during implementation and record in Completion Notes.
+

docs/stories/checks/1.2.validation.md

@@ -0,0 +1,24 @@
+Story Draft Checklist — 1.2 Global Layout, Sidebar Nav, Command Palette
+
+1. Goal & Context Clarity
+- PASS — Clear objective and relationship to epic; sidebar non‑collapsible constraint noted.
+
+2. Technical Implementation Guidance
+- PARTIAL — Strong file guidance; Command Palette suggests cmdk/Radix but repo lacks that dep. Either implement minimal custom palette or confirm dependency addition with PO.
+
+3. Reference Effectiveness
+- PASS — Concrete file paths; AdminSidebar reuse noted for styling.
+
+4. Self-Containment Assessment
+- PASS — Assumptions and constraints explicit; edge cases (CLS, a11y) addressed.
+
+5. Testing Guidance
+- PASS — CLS ≤ 0.1, keyboard order, deep links verification.
+
+Final Assessment: NEEDS REVISION (minor)
+- Clarity score: 8/10
+- Issues:
+  - Decide on Command Palette implementation path (no new dep vs add `cmdk`).
+- Suggestion:
+  - If no new deps, implement a lightweight overlay list + fuzzy filter using existing React and tokens.
+

docs/stories/checks/1.3.validation.md

@@ -0,0 +1,21 @@
+Story Draft Checklist — 1.3 Sticky Split Pattern Library
+
+1. Goal & Context Clarity
+- PASS — Clear component library goal and user value; ties to epic patternization.
+
+2. Technical Implementation Guidance
+- PASS — API, props, files, and hook described; motion integration specified.
+
+3. Reference Effectiveness
+- PASS — References kept to file paths and tokens; reduced need to hunt.
+
+4. Self-Containment Assessment
+- PASS — Assumptions (no scroll‑jacking, reduced‑motion) explicit; mobile fallback covered.
+
+5. Testing Guidance
+- PASS — Perf/a11y manual checks defined.
+
+Final Assessment: READY
+- Clarity score: 9/10
+- Notes: Provide brief README with example to accelerate adoption.
+

docs/stories/checks/1.4.validation.md

@@ -0,0 +1,23 @@
+Story Draft Checklist — 1.4 Projects Section Revamp
+
+1. Goal & Context Clarity
+- PASS — Clear outcomes for index and detail; media wrapper goal set.
+
+2. Technical Implementation Guidance
+- PARTIAL — Solid file guidance. Reel source relies on `siteAsset` keys; define exact key(s) and fallback sequence.
+
+3. Reference Effectiveness
+- PASS — Direct file paths; mapping to existing fields documented.
+
+4. Self-Containment Assessment
+- PASS — No schema changes; filters on in‑memory list; edge cases called out.
+
+5. Testing Guidance
+- PASS — IV checks, lazy media, SEO preservation.
+
+Final Assessment: NEEDS REVISION (minor)
+- Clarity score: 8/10
+- Issues:
+  - Specify reel asset priority: try `projects.reel.video` → `projects.reel.embed` → `projects.hero.image`.
+  - Confirm filter UX defaults (initial tab, default category/year).
+

docs/stories/checks/1.5.validation.md

@@ -0,0 +1,21 @@
+Story Draft Checklist — 1.5 Process Pages
+
+1. Goal & Context Clarity
+- PASS — Clear 3 pages and cross‑links; aligns with epic.
+
+2. Technical Implementation Guidance
+- PASS — Route structure and components outlined; badge/icon approach specified.
+
+3. Reference Effectiveness
+- PASS — File paths and component references; simple enough.
+
+4. Self-Containment Assessment
+- PASS — No backend changes; fallbacks if StickySplit not ready.
+
+5. Testing Guidance
+- PASS — A11y and bundle growth checks.
+
+Final Assessment: READY
+- Clarity score: 9/10
+- Notes: Keep copy minimal; iterate visuals later.
+

docs/stories/checks/1.6.validation.md

@@ -0,0 +1,21 @@
+Story Draft Checklist — 1.6 Studio Pages
+
+1. Goal & Context Clarity
+- PASS — Three pages and purpose clear.
+
+2. Technical Implementation Guidance
+- PASS — Routes/components listed; reuse suggested.
+
+3. Reference Effectiveness
+- PASS — File paths named; component references present.
+
+4. Self-Containment Assessment
+- PASS — No backend dependencies; placeholders allowed.
+
+5. Testing Guidance
+- PASS — A11y ≥ 90 target; link checks.
+
+Final Assessment: READY
+- Clarity score: 9/10
+- Notes: Ensure sidebar/footer include links once Story 1.2 lands.
+

docs/stories/checks/1.7.validation.md

@@ -0,0 +1,24 @@
+Story Draft Checklist — 1.7 Contact Smart Form
+
+1. Goal & Context Clarity
+- PASS — Guided fields, success page, optional persistence defined.
+
+2. Technical Implementation Guidance
+- PARTIAL — API route contract and envs should be specified explicitly.
+  - Proposed envs: `NEXT_PUBLIC_WEB3FORMS_ACCESS_KEY` (existing), `CF_CONTACT_ENDPOINT`, `CF_CONTACT_AUTH` (optional).
+
+3. Reference Effectiveness
+- PASS — File paths and components referenced; migration path from Web3Forms clear.
+
+4. Self-Containment Assessment
+- PASS — Assumptions and constraints explicit (no Prisma changes; no PII logging).
+
+5. Testing Guidance
+- PASS — Validation scenarios, success redirect, and regression scope defined.
+
+Final Assessment: NEEDS REVISION (minor)
+- Clarity score: 8/10
+- Issues:
+  - Lock down API response shape (e.g., `{ ok: boolean, message?: string }`).
+  - Document exact rate limit policy (e.g., 5/min/IP) to test against.
+

docs/stories/checks/1.8.validation.md

@@ -0,0 +1,21 @@
+Story Draft Checklist — 1.8 Hardening: Performance, Accessibility, SEO
+
+1. Goal & Context Clarity
+- PASS — Objectives and budgets clear.
+
+2. Technical Implementation Guidance
+- PASS — Concrete steps with file references (fonts, images, skip link, sitemap, telemetry).
+
+3. Reference Effectiveness
+- PASS — File paths listed; minimal external references.
+
+4. Self-Containment Assessment
+- PASS — Assumptions and constraints explicit; no backend changes.
+
+5. Testing Guidance
+- PASS — Perf/a11y/observability verification detailed.
+
+Final Assessment: READY
+- Clarity score: 9/10
+- Notes: Add `src/lib/telemetry.ts` with tiny wrapper around Sentry to ease instrumentation.
+