Optimize studio-sample: shared CSS, mobile nav, SEO, a11y, working filter

- Extract duplicated per-page CSS into one shared style.css
- Add CSS-only hamburger menu for ≤720px (was overflowing)
- Add meta description / Open Graph / favicon to all pages
- Unify footers, fix dead links, distinct <title>s
- :focus-visible outlines, aria-hidden on decorative text, contrast bumps
- Make works.html category filter actually filter (data-cat)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

caddy/www/studio-sample/CLAUDE.md

@@ -4,14 +4,15 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ## Project Overview
 
-Static portfolio website for **Studio Sample**, a Tokyo-based design and front-end studio. Three HTML files with embedded CSS and minimal vanilla JavaScript — intentionally zero frameworks, zero build tooling.
+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
-- All styles are embedded in each HTML file's `<style>` tag (no external stylesheets)
-- Responsive design via CSS Grid, Flexbox, and `clamp()` for fluid typography
-- The only JavaScript is a filter button toggle on `works.html` (~10 lines, lines 539–548)
+- **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
 
@@ -19,17 +20,20 @@ Static portfolio website for **Studio Sample**, a Tokyo-based design and front-e
 |---|---|
 | `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 category filter (All / Branding / Web / Print / Identity) |
+| `works.html` | Portfolio grid with working category filter (All / Branding / Web / Print / Identity) |
+| `timeline.html` | Studio history timeline (2020 → 2026) |
 
 ## Development
 
-Open any `.html` file directly in a browser — no build step or local server required. For live reload, any static file server works (e.g. `python3 -m http.server`).
+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
 
-- Color palette: `#e53935` (red accent), `#111111` (primary text), `#f7f7f7` / `#ffffff` (backgrounds)
+- Palette: `#e53935` (red accent), `#111111` (text/dark sections), `#f7f7f7` / `#ffffff` (backgrounds)
 - Typography: system font stack (`-apple-system`, `Segoe UI`, `Noto Sans TC/JP`)
-- Responsive breakpoints follow a mobile-first pattern; `clamp()` handles fluid type scaling
+- 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