# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Project Overview

Static portfolio website for **Studio Sample**, a Tokyo-based design and front-end studio. Four HTML pages sharing one stylesheet, with minimal vanilla JavaScript — intentionally zero frameworks, zero build tooling.

## Architecture

- **Pure static HTML/CSS/JS** — no package manager, no bundler, no preprocessor
- **One shared stylesheet `style.css`** linked by all four pages (no inline `<style>` blocks). Edit it once → every page updates. Cross-page conflicts are resolved by parent scoping (`#works .works-grid` vs `.works-section .works-grid`) and modifier classes (`.cta-strip.red`).
- Responsive via CSS Grid, Flexbox, and `clamp()` for fluid typography
- Mobile nav (≤720px) is a **CSS-only checkbox-hack hamburger** (`#nav-toggle` + `.nav-burger` label) — no JS
- The only JavaScript is the category filter on `works.html` (in-page `<script>`): cards carry `data-cat` (space-separated, can be multiple), buttons carry `data-cat`, and clicking toggles `display`

### Pages

| File | Purpose |
|---|---|
| `index.html` | Homepage: hero, features, works preview, process, about, news, contact form |
| `services.html` | Services, pricing tiers (¥150K / ¥380K / custom), FAQ |
| `works.html` | Portfolio grid with working category filter (All / Branding / Web / Print / Identity) |
| `timeline.html` | Studio history timeline (2020 → 2026) |

## Development

Open any `.html` directly in a browser — no build step. Served live by the parent Caddy server at `/studio-sample/`. Browser caches `style.css` aggressively; hard-reload after CSS edits.

There are no tests, linters, or CI pipelines.

## Style Conventions

- Palette: `#e53935` (red accent), `#111111` (text/dark sections), `#f7f7f7` / `#ffffff` (backgrounds)
- Typography: system font stack (`-apple-system`, `Segoe UI`, `Noto Sans TC/JP`)
- Mobile-first, `clamp()` for fluid type
- Keyboard focus styling via `:focus-visible` (red outline); decorative elements (`.hero-bg-text`) are `aria-hidden`
- Content is bilingual Traditional Chinese + English throughout
- SEO: each page has `<meta name="description">` + Open Graph tags + an inline-SVG data-URI favicon
