# CLAUDE.md

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

## What this is

A static website introducing Tom Hanks. Plain HTML and CSS:
no build step, no dependencies, no framework. Just open
`tom-hanks.html` in a browser, and refresh after every edit.

## Structure

tom-hanks.html            main page: bio, then the film list
forrest-gump.html         one page per film, the same shape
apollo-13.html
saving-private-ryan.html
cast-away.html
captain-phillips.html
styles.css                every rule for every page

`tom-hanks.html` is the hub. Each film row links out to that
film's page, and each film page links back with `.back-link`
in its `.topbar`. A new film needs both directions wired, or
the page exists but nothing reaches it.

## Conventions

- One stylesheet. Every page links `styles.css`. Do not
  add a `<style>` block or a second CSS file: the pages drift
  apart the moment styling goes page-local.
- Color lives in `:root`: `--accent`, `--ink`, `--muted`,
  `--surface`, `--bg`, `--line`. Restyle the site by editing
  those six values, never by hardcoding a hex inside a rule.
- Every page shares one skeleton: `.hero` (eyebrow,
  title, tagline), `main` with `.bio` sections, then `footer`.
  Film pages add `.topbar` above the hero.
- The content column is capped at 760px in `.hero`, `main`,
  `.topbar`, and `footer`. Change all four together or the
  page goes ragged.

## Adding a film page

1. Copy `forrest-gump.html` and rename it after the film,
   lowercase with dashes.
2. Update `<title>`, the `.eyebrow` year, the `h1`, and the
   `.tagline` and `.bio` copy. Leave the markup alone.
3. Add a `.film-link` row to the `.film-list` in
   `tom-hanks.html`, in release-year order.