# TVReviewer.com — Claude Instructions

## Project Overview
Static HTML awards coverage site. No build tools, no Node, no framework. Everything is plain HTML/CSS/JS files served directly.

**Working directory:** `C:\Users\walhu\websites\tvreviewer.com`

## Technology
- Pure static HTML + CSS + vanilla JS
- No npm, no bundler, no backend
- PowerShell for bulk file operations (available on this Windows machine)
- Bash also available but PowerShell preferred for file manipulation

## File Structure
```
tvreviewer.com/
├── index.html          # Main homepage (inline styles, NOT awards.css)
├── awards.css          # Shared stylesheet for all year pages and calendar.html
├── calendar.html       # 2026 awards season calendar
├── search-data.js      # Generated search index (861KB, 5480+ entries)
├── build-search.ps1    # PowerShell script to regenerate search-data.js
├── images/
│   ├── geena_oscar.jpg         # Intro section photo (main page)
│   └── awards/                 # Award show thumbnail photos (80x80)
└── {show}/             # One folder per award show
    ├── 2026.html
    ├── 2025.html
    └── ...
```

## Award Show Folders
`oscars`, `emmys`, `baftas`, `baftatv`, `globes`, `sag`, `grammys`, `tonys`, `criticschoice`, `spiritawards`, `pca`, `mtv`, `dga`, `wga`, `aacta`, `hca`, `satellite`

## Other Top-Level Pages
`calendar.html`, `podcasts.html`, `critics.html`, `youtube.html`

## Other Folders
`shows/` — show index page (`shows/index.html`)

## Crew Pages (`crew/`)
Separate section covering below-the-line categories. Uses `crew/crew.css`.
Pages: `cinematography.html`, `editing.html`, `sound.html`, `productiondesign.html`, `costumes.html`, `makeup.html`, `vfx.html`, `stunts.html`, `music.html`, `casting.html`, `producers.html`, `practicalfx.html`, `spotlights.html`, `officehours.html`

## CSS Variables (Dark Theme — Default)
```css
--gold:     #c9a84c
--gold-lt:  #e8d08a
--dark:     #0c1018      /* page background */
--dark-mid: #141b26      /* card background */
--navy:     #0a1628
--text:     #dce6f0
--muted:    #7a92a8
--accent:   #a8cddd
--border:   rgba(201,168,76,.18)
```
Light mode overrides live on `html.light` in both `index.html` (inline) and `awards.css`.

## index.html Specifics
- Has inline `<style>` block — does NOT use awards.css
- Light mode: `html.light` overrides in the inline style block
- Theme toggle: early detection `<script>` in `<head>`, button in nav, wiring JS before `</body>`
- Search: `search-data.js` loaded before `</body>`, inline search JS follows

## Year Page Structure (uses awards.css)
```html
<head>
  <link rel="stylesheet" href="../awards.css">
  <script>/* early theme detection */</script>
</head>
<nav class="top-nav">
  <!-- site-link, back link, year-nav div, theme-toggle button -->
</nav>
<header class="show-header">...</header>
<div class="stats-bar">...</div>
<main class="categories-main">
  <div class="categories-grid [nominees-only]">
    <div class="cat-card [major]">
      <div class="cat-name">Category Name</div>
      <!-- winner entry (if results announced): -->
      <div class="winner-entry">
        <div class="winner-badge">Winner</div>
        <div class="winner-title">Name or Film</div>
        <div class="winner-links"><!-- IMDb + X links --></div>
        <div class="winner-sub">Film or Person</div>
      </div>
      <!-- nominees: -->
      <div class="nominees-list">
        <div class="nom-entry">
          <span class="nom-title">Name or Film</span>
          <span class="nom-links-inline"><!-- links --></span>
          <span class="nom-detail">— Film or detail</span>
        </div>
      </div>
    </div>
  </div>
</main>
```

## Key Patterns
- **Person nominees**: `nom-title` + `nom-detail` (detail starts with `&mdash;`)
- **Film nominees**: `nom-title` + `nom-links-inline` (Trailer/Watch/RT/IMDb already present)
- **nominees-only pages**: no `winner-entry` blocks, `categories-grid` has class `nominees-only`
- **Completed pages**: have `winner-entry` blocks with `winner-title` / `winner-sub`

## Link Classes (awards.css)
```css
.nom-link        /* small pill button */
.nom-link.imdb   /* yellow, IMDb search */
.nom-link.x-link /* accent blue, X.com search */
.film-link       /* larger film action links */
.film-link.trailer / .watch / .imdb
```

## Bulk Operations
Use PowerShell scripts for changes across 80+ year pages. Write script to a `.ps1` file, run with `powershell -File path/to/script.ps1`, then delete the temp file.

Common patterns:
- Check "already patched" before modifying (idempotency)
- Use `Get-Content -Raw -Encoding UTF8` and `Set-Content -Encoding UTF8 -NoNewline`
- Use `[regex]::Replace` with a `[System.Text.RegularExpressions.MatchEvaluator]` scriptblock for name-dependent substitutions

## Search Index
Regenerate with: `powershell -File build-search.ps1` from the project root.
Parses all year HTML files, outputs `search-data.js` with `window.SEARCH_DATA` array.

## What NOT to Do
- Do not add Node.js, npm, or any build pipeline
- Do not use frameworks (React, Vue, etc.)
- Do not add docstrings or unnecessary comments
- Do not create files unless necessary
- Do not add social media links with hardcoded handles (they go stale) — use search URLs instead
- Do not commit or push without explicit user request

## Domain
`https://tvreviewer.com` — used in canonical URLs and og:image absolute paths.
