The live demo was built from exactly this text — nothing added.

# Fieldnotes — Illustrated Episode Companion with Data Viz

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
A single-page, illustrated companion to one long podcast episode, read chapter by chapter. Default story: Episode 47 of [BRAND], '[EPISODE_TITLE]' — [SUBJECT], a fictional family company that sawed a frozen lake into blocks and sold the cold to a harbor city. The page feels like a printed magazine feature laid on warm paper: watercolor paintings open each of five chapters, archival public-domain photographs sit in the text like taped scrapbook prints, eleven numbered exhibits (hand-drawn SVG charts and small interactive widgets) carry the numbers, and six pulled-out lessons can be saved to a notes drawer. A sticky chapter rail shows where the reader is and the matching timestamp in the episode, and a Skim/Read toggle hides the narrative for people who only want the charts and lessons.

- Audience: Listeners of a long-form history and business podcast who want to revisit the episode, skim it before listening, or share one chart or lesson with a friend.
- Goal: Let a visitor understand the whole story in five minutes of skimming or twenty minutes of reading, save the lessons that matter to them, and jump back into the episode at the right timestamp.
- Tone: Warm, curious and precise, like a good magazine feature. Concrete numbers, dates and names; short declarative sentences; no hype words, no exclamation marks, no emoji.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: react (MIT), react-dom (MIT), motion (motion.dev, import from 'motion/react') (MIT), lucide-react (ISC), tailwindcss (MIT), postcss (MIT), autoprefixer (MIT), vite (MIT), @vitejs/plugin-react (MIT), typescript (Apache-2.0), @fontsource-variable/fraunces (OFL-1.1), @fontsource-variable/source-serif-4 (OFL-1.1), @fontsource/ibm-plex-mono (OFL-1.1), @fontsource-variable/caveat (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Scaffold with npm create vite@latest using the react-ts template. One page, index.html, with anchored sections: #top, #map, #ch-1 to #ch-5, #recap, #credits.
  - vite.config.ts: base './', plugins [react()], build { outDir: 'dist', sourcemap: false }. Do not copy src/ into dist/.
  - Tailwind 3.4 through PostCSS (tailwindcss + autoprefixer). In theme.extend.colors add every palette color below under kebab-case keys (paper, paper-deep, print, ink, graphite, pencil, rule, indigo, glacier, ochre, rust, moss). In theme.extend.fontFamily add display ['Fraunces Variable', 'Georgia', 'serif'], serif ['Source Serif 4 Variable', 'Georgia', 'serif'], mono ['IBM Plex Mono', 'ui-monospace', 'monospace'], hand ['Caveat Variable', 'cursive'].
  - Import fonts once in src/main.tsx: '@fontsource-variable/fraunces/full.css', '@fontsource-variable/fraunces/full-italic.css', '@fontsource-variable/source-serif-4/index.css', '@fontsource-variable/source-serif-4/wght-italic.css', '@fontsource/ibm-plex-mono/400.css', '@fontsource/ibm-plex-mono/500.css', '@fontsource-variable/caveat/index.css'.
  - All copy, chapter metadata (number, title, years, start and end timestamps in seconds, chapter color), chart data, lessons, image paths, alt texts and credits live in src/content.ts. Components only read from it.
  - Components in src/components/: TopBar, Hero, EpisodeMap, ChapterRail, Chapter, Painting, Print, PullQuote, LessonCard, NotesDrawer, Recap, Credits, Footer, Watercolor (exports WatercolorDefs, Blot, WatercolorScene) and charts/ (BarChart, LineChart, UnitChart, WindowCard, ThicknessGauge, CrossingChart). Charts are hand-written SVG; no chart library.
  - Hooks in src/hooks/: useActiveChapter (IntersectionObserver on the five chapter sections, rootMargin '-35% 0px -60% 0px'), useEpisodeTime (maps scroll position inside the active chapter to a timestamp), useNotes (saved lesson ids in localStorage key 'companion-notes'), useSkim (boolean in localStorage key 'companion-skim').
  - src/index.css holds the Tailwind layers, the paper grain background, drop-cap and tape styles, the .skim rules and a prefers-reduced-motion block that disables transitions and the painting parallax.
  - Write scripts/fetch-assets.sh with one 'curl -fL -o <target> <url>' line per image in Assets, run it once, and keep the downloaded files in public/images/. The site never hotlinks.
  - Expected dist/ size: under 6 MB (self-hosted woff2, six webp paintings, four archival JPEGs).

## Variables
- [BRAND] — Show name (default: "The Long Ledger"). The podcast (or book club, newsletter) the companion belongs to. Used in the top bar wordmark, the hero eyebrow, the <title>, credits and footer.
- [EPISODE_TITLE] — Episode or book title (default: "Frozen Assets"). Short title set as the giant hero headline and in the <title>. Two or three words read best.
- [SUBJECT] — What the story is about (default: "The rise and melt of the Halvorsen Ice Company, 1856–1934"). One line under the headline. Drives every chapter, chart, lesson and image; when it changes, rewrite the five chapters, eleven exhibits and six lessons for the new story with the same structure.
- [HOSTS] — Hosts or narrators (default: "Maren Okafor & Teddy Lindqvist"). Invented names. Shown in the hero eyebrow, pull-quote attributions and credits.
- [RUNTIME] — Episode length (default: "4 h 12 min"). Shown in the hero eyebrow. The chapter timestamps add up to this length (04:12:00); rescale them if it changes.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/fieldnotes in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- Paper `#F4EEE2` — Page background, under a faint paper-grain texture
- Paper Deep `#EAE1CF` — Recap band, notes drawer, top bar background (at 94% opacity), map panel
- Print `#FBF7EE` — Photo print borders, lesson cards, tooltips, next-episode card
- Ink `#1F2430` — Headings, primary text, active states, primary button fill
- Graphite `#4A5160` — Body copy and deks
- Pencil `#8A8F98` — Captions, axis labels, inactive rail items, credit lines
- Rule `#D9CEBA` — 1px hairlines, borders, chart gridlines
- Lake Indigo `#2F4B6E` — Main accent: links, progress bar, primary chart lines, chapter 5 color
- Glacier `#9DB7C9` — Watercolor washes, chart area fills (35% opacity), chapter 1 color
- Ochre `#C8963E` — Lesson numerals and bookmark fill, tape strips (at 28% opacity), notes badge, chapter 2 color
- Rust `#B5523B` — Warnings and rivals: the 1890 price line, plant-ice line, Caveat annotations about loss, chapter 4 color
- Moss `#6F7F5A` — Chapter 3 color and its washes; never for text

### Typography
- Display — hero headline, chapter titles, numerals, pull quotes, lesson statements: Fraunces Variable (OFL), weights 400/500/600/700
- Text — body copy, deks, captions, rail titles: Source Serif 4 Variable (OFL), weights 400/600
- Mono — kickers, timestamps, buttons, chart axes, credits: IBM Plex Mono (OFL), weights 400/500
- Hand — chart annotations and margin scribbles only: Caveat Variable (OFL), weights 500/600

### Layout & motion
- Spacing: 8px base. Page container 1280px with 40px side padding (24px under 768px). Body text measure 680px; wide figures and charts 880px. Sections 128px apart on desktop, 88px on mobile; chapter openers get 160px top padding on desktop. Body 19px/1.7 Source Serif (17px/1.65 on mobile), paragraphs 24px apart.
- Radius: Paper-like and mostly square: 2px on prints, lesson cards and panels; 6px on buttons and tooltips; 999px only for the Skim/Read pill, chapter chips and the notes count badge.
- Motion: Reveal: text blocks, prints, lesson cards and charts fade in and rise 16px over 600ms with ease [0.22, 1, 0.36, 1] when 30% visible, once. Lists stagger by 80ms.
- Motion: Watercolor bloom: every Blot scales 0.85 → 1 and fades from 0 to its opacity over 900ms when it enters the viewport, once.
- Motion: Chart draw-in when 40% visible, once: line paths animate pathLength 0 → 1 over 1.4s ease-in-out; bars and unit squares grow from the baseline over 700ms with a 60ms stagger; Caveat annotations and their hand-drawn arrows appear after the data (arrow path draws over 500ms, text fades in 300ms).
- Motion: Painting parallax (≥1024px only): chapter paintings move from translateY(24px) to translateY(-24px) across their pass through the viewport, via useScroll + useTransform.
- Motion: Reading progress: a 2px Lake Indigo bar under the top bar, scaleX bound to page scroll progress through useSpring (stiffness 120, damping 30).
- Motion: Prints rest at rotate(-1.5deg) or rotate(1.2deg) (alternating) and straighten to 0deg with translateY(-4px) and a deeper shadow on hover, 250ms.
- Motion: Top bar chapter label and rail timestamp cross-fade (opacity + 6px y) in 200ms when the active chapter changes.
- Motion: Notes drawer slides in from the right (x 100% → 0) in 320ms ease-out over a 30% Ink backdrop; on mobile it is a bottom sheet rising from y 100%. Saving a lesson pops the count badge (scale 1 → 1.25 → 1, 300ms).
- Motion: prefers-reduced-motion: no reveals, blooms, parallax or draw-ins; charts render fully drawn; the drawer appears without sliding.
- Imagery: Three layers, never mixed inside one frame. (1) Six watercolor paintings (hero + one per chapter) shown with mix-blend-mode: multiply so their white paper merges into the page, and a feathered edge: mask-image radial-gradient(ellipse 75% 72% at 50% 50%, #000 60%, transparent 100%). (2) Four archival public-domain images shown as scrapbook prints: Print-colored border 10px with 36px at the bottom, image filter grayscale(1) sepia(0.3) contrast(1.05), two Ochre tape strips at the top corners (72×22px, rotated ±6°, 28% opacity, jagged ends via clip-path), shadow 0 14px 24px -14px rgba(31,36,48,0.35). (3) Watercolor washes drawn in code (Blot component) behind numerals, quotes, the hero headline and in charts. A paper grain covers the page background: an inline SVG data-URI with feTurbulence (baseFrequency 0.9, numOctaves 2) at 5% opacity, tiled at 240px, set as body background-image over Paper.

## Pages & Sections
### [EPISODE_TITLE] — a [BRAND] companion (`/index.html`)
1. **Head and shared pieces** — <title>[EPISODE_TITLE] — a [BRAND] companion</title>, lang='en', theme-color #F4EEE2. Favicon public/favicon.svg: a 32×32 irregular Ochre watercolor blot (#C8963E at 85%) with a 2px Lake Indigo ring offset 2px up-left, an invented mark also used at 22px in the top bar and footer. WatercolorDefs renders once at the top of <body> as a hidden SVG with three filters: #wc-bleed (feTurbulence fractalNoise baseFrequency 0.011, numOctaves 3, seed 7 → feDisplacementMap scale 26 → feGaussianBlur 0.6), #wc-soft (same noise, displacement scale 10) and #wc-edge (feMorphology erode 1 then composite 'out' to get a thin darker rim). Blot({color, size, seed, opacity=0.5}) draws a 48-point closed path with radius r(θ) = R·(1 + 0.08·sin(3θ+seed) + 0.05·sin(5θ+2·seed) + 0.03·sin(9θ+3·seed)), filled with the color through #wc-bleed, plus a second copy scaled 0.82 and offset (6px, −4px) at 70% of the opacity, plus a 1.5px stroke copy at 25% through #wc-edge for the pooled rim. The same seed always gives the same shape.
   Layout: A single <main> holds the sections in this order: hero, episode map, the chapter block (rail + five chapters), recap, credits, then the footer. Skim mode adds class 'skim' to <main>; every element marked data-skim='hide' gets display: none in that mode.
2. **Top bar (sticky)** — Left: the blot mark (22px), '[BRAND]' in Fraunces 600 18px Ink and 'COMPANION' in IBM Plex Mono 500 11px Pencil, letter-spacing 0.12em. Center (≥1024px, only after #ch-1 reaches the top): the active chapter as 'Ch. 2 — Sawdust Is a Business Model' in Source Serif italic 15px Graphite. Right: a Skim/Read segmented pill (two buttons 'Read' and 'Skim', mono 500 12px uppercase; active segment Ink fill with Paper text, inactive transparent with Graphite text; 1px Rule outline; height 32px) and a 'Notes' button (Lucide BookmarkCheck 16px + 'Notes' mono 12px + an Ochre count badge 18px with Ink text, hidden at 0).
   Layout: position sticky, top 0, z-40, height 60px, full width; inner 1280px container, flex items-center justify-between. Background Paper Deep at 94% opacity; a 1px Rule bottom hairline appears after 40px of scroll. The 2px progress bar sits on its bottom edge. Under 1024px a second sticky row (44px, same background) appears once #ch-1 reaches the top: five chips '01'–'05' (mono 500 13px, 36×28px, radius 999px) in a horizontally scrollable row followed by the active chapter title truncated in Source Serif italic 14px; the active chip is filled with its chapter color at 60% and Ink text. Under 480px the word 'Notes' hides and only the icon and badge remain.
   Motion: Progress bar scaleX follows scroll progress through useSpring. Chapter label cross-fades on change (200ms).
3. **Hero** — Eyebrow (mono 500 12px Pencil, uppercase, letter-spacing 0.12em): 'EPISODE 47 · 4 H 12 MIN · WITH MAREN OKAFOR & TEDDY LINDQVIST' (built from [RUNTIME] and [HOSTS]). H1 'Frozen Assets' ([EPISODE_TITLE]) in Fraunces 600, font-variation-settings 'opsz' 144, 'SOFT' 50, clamp(64px, 10vw, 136px), line-height 0.92, letter-spacing −0.02em, Ink. Under it in Fraunces italic 400 28px Graphite: 'The rise and melt of the Halvorsen Ice Company, 1856–1934' ([SUBJECT]). Lede (Source Serif 21px/1.6 Graphite, max 560px): 'For 79 winters a family company sawed a frozen lake into blocks and sold the cold to a whole city. This is the illustrated companion to our four-hour episode: five chapters, eleven exhibits and six lessons you can take back to your own work.' Buttons: primary 'Start with chapter one' (Ink fill, Paper text, mono 500 13px uppercase, letter-spacing 0.08em, height 48px, padding 0 22px, radius 6px, Lucide ArrowDown 16px, links to #ch-1) and secondary 'Skip to the six lessons' (1px Ink outline, Ink text, same size, links to #recap). Painting: /images/watercolor/hero-lake.webp with caption 'Lake Varden at first light, on the morning of a harvest.' in mono 11px Pencil under it. Stats row of four, each a number in Fraunces 600 44px Ink and a label in Source Serif 15px Graphite: '79' — 'winters harvested on Lake Varden'; '134,000' — 'tons cut at the 1906 peak'; '31,400' — 'kitchens on the wagon route in 1898'; '$6.40' — 'a ton in the summer of 1890'.
   Layout: id 'top'. Padding 96px 0 72px desktop, 56px 0 48px mobile. Desktop: 12-column grid, gap 32px. Text in columns 1–6; the painting spans columns 6–12, starts 40px lower and overlaps the text column slightly (z below text). A Glacier Blot (520px, seed 3, opacity 0.45) sits behind the H1, offset −80px left and −40px up. Mobile: single column, painting full-bleed (edge to edge) after the buttons. The stats row sits 72px below, full container width, 4 equal columns divided by 1px Rule vertical lines with 24px inner padding; 2×2 grid under 768px with horizontal and vertical hairlines.
   Motion: H1, subtitle, lede, buttons reveal in sequence (80ms stagger). The Glacier blot blooms first. The painting fades in over 900ms with scale 1.02 → 1. Stat numbers count up from 0 over 1.2s once visible (ease-out; formatted with thousands separators and the $ sign).
4. **Episode map** — Kicker mono 'THE EPISODE AT A GLANCE · 5 CHAPTERS · 04:12:00'. H2 in Fraunces 600 40px: 'Seventy-nine winters in five chapters'. A timeline of years 1856–1934 (ticks every 10 years, mono 11px) with five chapter bands drawn as soft watercolor rectangles (fill = chapter color at 45% through #wc-soft), odd chapters on the upper row and even on the lower row so overlaps stay readable, each labeled with its numeral and title in Source Serif 600 14px: 01 'A Crop That Grew Itself' 1856–1871 (Glacier); 02 'Sawdust Is a Business Model' 1872–1888 (Ochre); 03 'Fifty Pounds, Card in the Window' 1880–1898 (Moss); 04 'The Winter That Never Came' 1889–1890 (Rust, drawn at least 48px wide); 05 'The Machine in the Basement' 1901–1934 (Lake Indigo). Below it, an episode-time bar 0:00:00–4:12:00 split into five proportional segments in the same colors, with start timestamps under each in mono 11px: 00:00:00, 00:41:20, 01:29:05, 02:14:40, 02:58:15, ending 04:12:00. Caveat 600 22px Rust annotation with a hand-drawn arrow pointing at chapter 4's band: 'one warm winter'.
   Layout: id 'map'. Full-width Paper Deep panel inside the container, radius 2px, padding 40px, 1px Rule border. The timeline SVG uses viewBox 0 0 1200 180 and width 100%. Under 768px the SVG is replaced by a vertical list of five rows (64px tall, Rule dividers): a 40px Blot in the chapter color with the numeral on top in Fraunces 600 20px, the title in Source Serif 600 17px, years and timestamp range in mono 12px Pencil, and a Lucide ChevronRight 16px.
   Motion: Bands bloom left to right with 120ms stagger. Hovering a band (or its time segment) raises both to 70% opacity and shows the time range under the cursor; clicking either scrolls smoothly to that chapter (instant under reduced motion).
5. **Chapter block layout and rail** — Shared structure for all five chapters, in order: (a) opener — kicker in mono 500 12px Pencil uppercase 'CHAPTER 1 · 00:00:00–00:41:20 · 1856–1871', a big numeral '01' in Fraunces italic 600 160px (96px mobile) in the chapter color over a 260px Blot of the same color (opacity 0.4), H2 title in Fraunces 600 56px/1.02 (36px mobile) Ink, dek in Source Serif italic 21px Graphite; (b) the chapter painting; (c) narrative paragraphs (data-skim='hide'), the first with a drop cap: ::first-letter in Fraunces 600, 4.4em, float left, line-height 0.85, margin 6px 10px 0 0, chapter color; (d) a pull quote (data-skim='hide'); (e) the exhibits; (f) the lesson card(s). In skim mode a mono 12px Pencil line appears under the dek: 'Skimming — narrative hidden.' followed by an underlined 'Read this chapter' button that switches to Read mode and keeps the chapter in view. Rail content: label 'CHAPTERS' mono 500 11px Pencil; five items, each with the numeral (Fraunces 600 20px), title (Source Serif 15px/1.35) and time range (mono 11px); then a divider and 'Where you'd be in the episode' (mono 11px Pencil) above a live timestamp like '01:24:10' (mono 500 22px Ink) and '/ 04:12:00' (mono 13px Pencil). Pull quote: Fraunces italic 400 32px/1.3 (26px mobile) Ink, max 620px, padding-left 40px, a 120px opening quote mark in Fraunces 600 in the chapter color at 60% at the top-left over a small Blot, attribution in mono 12px Pencil, e.g. '— TEDDY LINDQVIST · 00:18:42'. Lesson card: Print fill, 1px Rule border, radius 2px, padding 28px 32px, max 680px, rotate(0.4deg), an Ochre tape strip centered on the top edge; top-left 'LESSON 1' mono 500 12px Ochre and a numeral in Fraunces italic 600 64px Ochre over a 120px Ochre Blot; the statement in Fraunces 500 26px/1.25 Ink; one explanatory sentence in Source Serif 17px Graphite; a bookmark toggle top-right (Lucide Bookmark 20px, becomes BookmarkCheck filled Ochre when saved, aria-pressed, aria-label 'Save lesson to notes'). Chart style (all charts): hand-written responsive SVG with a fixed viewBox and width 100%; axis labels and ticks in IBM Plex Mono 11px Pencil; gridlines 1px dashed (3 3) Rule; data lines 2.25px with round caps and joins; area and bar fills use the soft watercolor filter; a chart title in Source Serif 4 600 17px Ink with the exhibit number in mono above it ('EXHIBIT 1.2'); hover (or tap on touch) snaps to the nearest point and shows a tooltip card (Print fill, 1px Rule border, radius 6px, mono 12px, year on top, value below in Ink 500).
   Layout: Below 1024px there is no rail (the chip row in the top bar replaces it). From 1024px: CSS grid with columns 220px and minmax(0, 1fr), gap 64px. The rail is an <aside> with position sticky, top 96px; the active item has Ink text, a 3px left bar in its chapter color and a 2px progress line under it filling 0–100% with progress through that chapter; inactive items are Pencil and turn Graphite on hover; clicking an item scrolls to the chapter. The content column centers text at 680px and lets paintings, charts and prints run 880px wide. Each chapter is a <section id='ch-N'> with 160px top padding (96px mobile) and a 1px Rule top hairline across the content column. The timestamp is computed as start + (end − start) × progress, where progress is how far the viewport center has moved through that section (clamped 0–1).
   Motion: Numeral blot blooms, then the numeral fades in; the painting parallaxes on desktop; paragraphs and exhibits reveal on scroll.
6. **Chapter 1 — A Crop That Grew Itself** — Kicker 'CHAPTER 1 · 00:00:00–00:41:20 · 1856–1871'. Color Glacier. Dek: 'Anders Halvorsen noticed that Lake Varden grew a free harvest every January. The hard part was getting anyone to pay for it.' Painting /images/watercolor/ch1-lake-grid.webp, caption 'Cut blocks waiting on the ice, north shore of Lake Varden.' Paragraph 1: 'In the winter of 1856, Anders Halvorsen, a ship's carpenter who had settled in Coldbrook, walked onto Lake Varden with a borrowed crosscut saw and a sledge. The ice was 19 inches thick and clear enough to read through. By March he and four neighbors had cut 1,200 tons and stacked it under pine boughs on the north shore.' Paragraph 2: 'Selling it was harder. Fishmongers in Port Ellery, 40 miles downriver, already salted their catch and saw no reason to change. Halvorsen gave away the first ten tons, hauled by night so the fish would still be cold at the morning market, and charged for the next hundred. By 1871 the harvest had reached 31,000 tons, with three icehouses and 64 men on the winter payroll.' Pull quote: 'Nobody planted it, nobody watered it. The lake grew a crop every year, and the only question was who would show up with a saw.' — TEDDY LINDQVIST · 00:18:42. Exhibit 1.1 (print, rotate −1.5deg): /images/archive/ice-sawing.jpg, caption 'Exhibit 1.1 — Cutting the cakes free. Once a horse-drawn plow had scored the grid, the last inches were sawn by hand.' Credit line: 'Photo: Brown Bros., 1914. Public domain.' Exhibit 1.2, BarChart 'Tons cut per winter, 1856–1871': 1856 1,200; 1858 2,900; 1860 5,400; 1863 8,800; 1866 14,500; 1869 22,000; 1871 31,000. Bars in Glacier through #wc-soft with a 1.5px Lake Indigo top edge; y axis 0–35,000 with ticks every 10,000 labeled '10k'. Caveat annotation in Lake Indigo with an arrow to the 1866 bar: 'rail spur to Port Ellery opens'. Lesson 1: 'A free input is not a moat. The edge is everything you do after the harvest.' Explanation: 'Anyone with a saw could cut Lake Varden. Halvorsen won by getting cold fish to market before anyone else thought to try.'
   Layout: Opener, painting (880px, 4:3), two paragraphs, pull quote, Exhibit 1.1 print at 640px wide offset left by 40px on desktop, Exhibit 1.2 chart at 880px (viewBox 0 0 880 360), lesson card.
   Motion: Bars grow from the baseline with a 60ms stagger; the annotation arrow draws after the last bar.
7. **Chapter 2 — Sawdust Is a Business Model** — Kicker 'CHAPTER 2 · 00:41:20–01:29:05 · 1872–1888'. Color Ochre. Dek: 'The company's real product turned out to be time: how many tons survived from February to August.' Painting /images/watercolor/ch2-icehouse.webp, caption 'House No. 4 and its elevator, with a schooner loading at the pier.' Paragraph 1: 'Ice melts. In the first open stacks Halvorsen lost 61 tons of every hundred before summer. Each new icehouse was an argument about walls: board sheds, then double walls packed with eight inches of sawdust from the Coldbrook mill, then House No. 4 in 1879, 180 feet long, with an air gap, a slatted floor and a steam-driven elevator.' Paragraph 2: 'House No. 4 lost nine tons in a hundred. The same winter's cut now delivered more than twice as many tons, and it could be sold in August, when prices peaked. By 1886 the company owned seven houses holding 96,000 tons and chartered schooners to carry ice south in sawdust-packed holds.' Pull quote: 'They thought they were in the ice business. They were really in the storage business, and sawdust was the technology.' — MAREN OKAFOR · 00:57:10. Exhibit 2.1, UnitChart 'Of every 100 tons cut, how many reached a customer': a segmented control of four methods (mono 12px buttons): 'Open stack, 1856' 39; 'Board shed, 1860' 61; 'Double wall + sawdust, 1868' 82; 'House No. 4, 1879' 91. A 10×10 grid of 100 squares (each 22px with 6px gaps; 18px squares on mobile): delivered tons are crisp squares with a 1.5px Lake Indigo outline and a light Glacier fill, melted tons are soft Glacier puddles at 25% through #wc-bleed. To the right (below on mobile) the delivered number in Fraunces 600 72px Ink with 'tons delivered' in mono, and a one-line note in Source Serif 16px, e.g. for House No. 4: 'Only 9 tons melted before August.' Default selection: Open stack. Exhibit 2.2 (print, rotate 1.2deg): /images/archive/ice-elevator.jpg, caption 'Exhibit 2.2 — Cakes floated to the foot of an elevator and carried up into the icehouse.' Credit: 'Photo: Brown Bros., 1914. Public domain.' Lesson 2: 'Storage was the product. Cutting melt from 61% to 9% more than doubled what each winter was worth.' Explanation: 'The lake gave every competitor the same ice. Only the walls decided how much of it was still for sale in August.'
   Layout: Opener, painting, two paragraphs, pull quote, Exhibit 2.1 at 880px (grid left, readout right in a 1fr/260px split; stacked under 768px), Exhibit 2.2 print at 640px offset right by 40px on desktop, lesson card.
   Motion: Switching methods animates squares in reading order with a 6ms stagger: squares changing from delivered to melted fade into puddles (200ms), the reverse sharpen back; the big number tweens between values over 400ms.
8. **Chapter 3 — Fifty Pounds, Card in the Window** — Kicker 'CHAPTER 3 · 01:29:05–02:14:40 · 1880–1898'. Color Moss. Dek: 'Home delivery turned a seasonal wholesale trade into a daily habit in 31,400 kitchens.' Painting /images/watercolor/ch3-route.webp, caption 'A delivery wagon on Tanner Street, Port Ellery, before seven in the morning.' Paragraph 1: 'In 1880 Halvorsen bought six wagons and started a household route in Port Ellery. The trick was a square card with a number on each edge: 25, 50, 75, 100. A household turned the card so the weight it wanted pointed up and set it in the front window. The driver read the street from his seat and never had to knock.' Paragraph 2: 'Iceboxes were cheap, and the route compounded. By 1898 there were 212 wagons, 31,400 households and a standing order at nearly every butcher in the city. Wholesale had made the company big; the window card made it part of the morning.' Pull quote: 'It is the same idea as a subscription. You do not decide to buy ice every day. You just leave the card up.' — TEDDY LINDQVIST · 01:48:30. Exhibit 3.1, WindowCard 'Turn the card': a 240px square card (Print fill, 2px Lake Indigo border, radius 2px) with 25, 50, 75 and 100 printed along its four edges in Fraunces 600 28px, each number facing outward; two buttons 'Turn left' and 'Turn right' (Lucide RotateCcw / RotateCw 16px, mono 12px) plus click on the card itself rotate it 90°. The number at the top is the order; a readout beside it shows: 25 lb — '5¢ in 1898 · a day for a couple'; 50 lb — '9¢ · two days for a family of five'; 75 lb — '13¢ · a corner grocer's counter'; 100 lb — '16¢ · a butcher's daily block'. Default: 50 on top. Exhibit 3.2, LineChart 'Households on the route, 1880–1898': 1880 2,100; 1883 4,600; 1886 9,800; 1889 15,300; 1892 20,700; 1895 26,100; 1898 31,400. Lake Indigo line with 5px Print dots ringed in Indigo, Moss area wash at 30%; y axis 0–35,000. Caveat annotation in Moss: 'window cards printed, 1882'. Exhibit 3.3 (print, rotate −1.5deg): /images/archive/ice-tools.jpg, caption 'Exhibit 3.3 — The kit: tongs, saws, picks and the spring scale every driver carried.' Credit: 'Photo: Brown Bros., 1914. Public domain.' Lesson 3: 'Make the repeat order effortless. A card in the window beat any salesman.' Explanation: 'The route grew fifteenfold in eighteen years without a single door-to-door pitch.'
   Layout: Opener, painting, two paragraphs, pull quote, Exhibit 3.1 as a 880px Paper Deep panel (card left, readout right; stacked on mobile), Exhibit 3.2 chart at 880px (viewBox 0 0 880 340), Exhibit 3.3 print at 600px offset left, lesson card.
   Motion: The card rotates with a spring (stiffness 220, damping 22); the readout cross-fades (200ms). The chart line draws in, then dots pop in with a 40ms stagger.
9. **Chapter 4 — The Winter That Never Came** — Kicker 'CHAPTER 4 · 02:14:40–02:58:15 · 1889–1890'. Color Rust. Dek: 'Lake Varden never froze past six inches. The company that sold certainty had none to sell.' Painting /images/watercolor/ch4-thaw.webp, caption 'Open water in January 1890, and an empty house.' Paragraph 1: 'December 1889 was mild, and January was milder. Crews waited on shore for ice that never reached the twelve inches a horse could safely walk on. The final harvest was 31,000 tons, against 96,000 the winter before, and most of it was thin and cloudy.' Paragraph 2: 'Halvorsen had sold forward contracts at $2.10 a ton. By June the open market paid $6.40. The company honored every contract with households and hospitals, bought northern ice at a loss and ended the year $41,000 in debt. It also built House No. 8, big enough to hold two winters of ice: the first reserve anyone in the trade kept on purpose.' Pull quote: 'Every business has a weather. Theirs was literally the weather.' — MAREN OKAFOR · 02:31:05. Exhibit 4.1, LineChart 'Wholesale price per ton, Port Ellery, Oct 1889 – Sep 1890' (monthly, x labels 'Oct' … 'Sep'): 2.10, 2.10, 2.35, 3.20, 4.60, 5.40, 5.90, 6.20, 6.40, 6.40, 5.80, 4.70. Rust line; a dashed Lake Indigo horizontal line at 2.10 labeled 'contract price' in mono 11px; the area between the two filled with Rust at 20% through #wc-soft. y axis $0–$7. Caveat annotations in Rust: at Jun 'three times the contract' with an arrow; inside the shaded area 'lost on every contracted ton'. Exhibit 4.2, ThicknessGauge 'How thick the ice got': a vertical ruler 0–20 inches (major ticks every 5, minor every 1, mono 11px) drawn like a wooden folding rule in Paper Deep with Ink ticks, with three horizontal markers that extend into labels: 19 in — '1856, the first harvest' (Glacier), 12 in — 'safe for a horse team' (Ink, dashed), 6 in — 'January 1890, the thickest it got' (Rust). A Glacier wash fills the ruler from 0 up to 6 in. Beside it two stacks of isometric ice blocks drawn in SVG: '1889 · 96,000 t' (ten blocks) and '1890 · 31,000 t' (three blocks), labels in mono. Lesson 4: 'If the weather decides your supply, a reserve is strategy, not waste.' Explanation: 'A second winter of ice in storage looks like waste in every normal year, and like the whole company in the year that is not.'
   Layout: Opener, painting, two paragraphs, pull quote, Exhibit 4.1 at 880px (viewBox 0 0 880 360), Exhibit 4.2 at 880px as a two-column panel (gauge 220px left, stacks right; stacked on mobile), lesson card. No archival print in this chapter.
   Motion: The price line draws in over 1.4s, then the shaded loss area fades in (500ms). The gauge wash rises from 0 to 6 in over 900ms; ice blocks drop in from 12px above with a 70ms stagger.
10. **Chapter 5 — The Machine in the Basement** — Kicker 'CHAPTER 5 · 02:58:15–04:12:00 · 1901–1934'. Color Lake Indigo. Dek: 'Manufactured ice was expensive, then it was not. The company spent ten years arguing about purity instead of price.' Painting /images/watercolor/ch5-plant.webp, caption 'The Port Ellery ice plant at dusk; the old houses across the lake.' Paragraph 1: 'The first ice plant in Port Ellery opened in 1901: a brick shed with an ammonia compressor and rows of steel cans that froze 300-pound blocks in two days. Its ice cost more than lake ice. Halvorsen ran advertisements about ice the way winter makes it and ignored the plant's real advantage: it delivered the same block in a warm year as in a cold one.' Paragraph 2: 'Plant ice fell below lake ice in 1911 and kept falling. Harvests shrank from 134,000 tons in 1906 to 3,800 in 1934, the last winter crews went out on Lake Varden. The company survived by renting its insulated houses as cold storage for apples and butter. House No. 8 was still taking tenants in 1952.' Pull quote: 'They had the best warehouses in the state and spent a decade defending the lake.' — TEDDY LINDQVIST · 03:41:20. Exhibit 5.1, CrossingChart 'Cost per ton delivered: lake ice vs. plant ice, 1895–1930' with a year scrubber. Lake ice (Lake Indigo line): 1895 1.90; 1900 2.05; 1905 2.20; 1910 2.45; 1915 2.80; 1920 3.40; 1925 3.70; 1930 3.95. Plant ice (Rust line): 1895 4.60; 1900 3.70; 1905 3.05; 1910 2.55; 1915 2.20; 1920 2.05; 1925 1.85; 1930 1.70. Values between data years are interpolated linearly. A range input (1895–1930, step 1, styled as a 2px Rule track with a 16px Ink thumb, default 1915) moves a vertical Ink hairline across the chart, and a readout above it shows '1915 · lake $2.80 · plant $2.20' in mono 13px with colored dots. A 10px Ochre ring marks the crossing at 1911 with a Caveat annotation in Ochre: 'the lines cross, 1911'. Direct line labels at the right end in mono 12px: 'lake ice' and 'plant ice'. Dragging on the chart itself also moves the scrubber. Exhibit 5.2 (print, rotate 1.2deg): /images/archive/ice-factory.jpg, caption 'Exhibit 5.2 — Cutaway of an ice factory: compressor at right, freezing tank in the middle, storage at left.' Credit: 'Engraving, Popular Science Monthly, vol. 39, 1891. Public domain.' Lesson 5: 'Do not argue quality against a rival that is steadier and getting cheaper. Match the reliability first.' Explanation: 'Customers never asked for purer ice. They asked for ice that showed up in August.' Lesson 6: 'Your assets can outlive your product.' Explanation: 'The icehouses earned rent for eighteen years after the last harvest.'
   Layout: Opener, painting, two paragraphs, pull quote, Exhibit 5.1 at 880px (viewBox 0 0 880 380; the range input spans the plot width directly under the x axis), Exhibit 5.2 print at 640px offset right, then lesson cards 5 and 6 side by side at 880px (two columns, 24px gap; stacked under 768px).
   Motion: Both lines draw in together over 1.4s; the crossing ring scales in from 0 with a small spring after the lines finish. The scrubber hairline follows the input without easing.
11. **Recap** — Kicker mono 'RECAP'. H2 Fraunces 600 64px (40px mobile): 'Six lessons from 79 winters'. Subhead Source Serif 19px Graphite: 'Save the ones you want to keep. They stay in your notes on this device.' Six summary cards, one per lesson: numeral in Fraunces italic 600 44px Ochre, the statement in Fraunces 500 21px/1.3 Ink, a link 'From chapter 2 →' in mono 12px Lake Indigo that scrolls to the chapter, and the same bookmark toggle as the lesson cards (state shared). Then 'The whole arc' — LineChart 'Tons harvested per winter, 1856–1934' at full 880px: 1856 1,200; 1861 6,500; 1866 14,500; 1871 31,000; 1876 52,000; 1881 74,000; 1886 96,000; 1889 96,000; 1890 31,000; 1896 118,000; 1901 127,000; 1906 134,000; 1911 121,000; 1916 88,000; 1921 54,000; 1926 22,000; 1931 7,500; 1934 3,800. Behind the line, the five chapter year ranges as watercolor bands in their colors at 22% (chapter 3 drawn as a lower half-height band where it overlaps chapter 2). Caveat annotations: 'peak, 1906' (Ink), 'the warm winter' (Rust, at 1890), 'last harvest, 1934' (Lake Indigo). Then a key-numbers row of six (number in Fraunces 600 44px Ink, label in Source Serif 15px Graphite): '134,000 t' — 'peak harvest, 1906'; '91 of 100' — 'tons saved by House No. 4'; '31,400' — 'households on the route, 1898'; '$6.40' — 'per ton in June 1890'; '1911' — 'plant ice gets cheaper'; '3,800 t' — 'the last harvest, 1934'.
   Layout: id 'recap'. Full-bleed Paper Deep band with a torn-paper top edge: an SVG path 24px tall spanning the width with a fixed set of irregular points (define the points in content.ts, not random). Padding 120px 0 128px. Inside the 1280px container: heading block left-aligned at 680px; lesson cards in a 3-column grid (2 columns 768–1023px, 1 column below), gap 24px, cards Print fill with 1px Rule border and radius 2px, padding 24px; the arc chart centered at 880px with 80px above; key numbers in a 6-column row (3×2 under 1024px, 2×3 under 640px) separated by 1px Rule lines.
   Motion: Cards reveal with an 80ms stagger. The arc bands bloom left to right, then the line draws over 1.8s. Key numbers count up once visible.
12. **Notes drawer** — Title 'Your notes' in Fraunces 600 28px. Under it mono 12px Pencil: '[EPISODE_TITLE] · saved lessons'. Each saved lesson: Ochre numeral (Fraunces italic 600 28px), statement (Source Serif 600 17px Ink), 'Go to chapter 3' link (mono 12px Lake Indigo, closes the drawer and scrolls) and a Lucide X 14px remove button. Empty state: a 96px Glacier Blot and 'Nothing saved yet. Tap the bookmark on any lesson card to keep it here.' in Source Serif 17px Graphite. Footer buttons: 'Copy as text' (Lucide Copy 14px; writes '[EPISODE_TITLE] — lessons' plus one numbered line per saved lesson to the clipboard and shows 'Copied' with Lucide Check for 1.5s) and 'Clear all' (text button, Rust).
   Layout: Opened by the Notes button. Desktop: fixed right panel, width 400px, full height, Paper Deep fill, 1px Rule left border, padding 32px, its own scroll. Under 768px: bottom sheet, full width, max height 80vh, radius 12px 12px 0 0, a 36×4px Rule grab handle. A 30% Ink backdrop closes it on click; Esc closes it; focus moves to the close button (Lucide X 20px, top-right) on open, is trapped inside, and returns to the Notes button on close.
   Motion: Slides in 320ms ease-out (bottom sheet rises on mobile); list items fade in with a 40ms stagger; removed items collapse height over 200ms.
13. **Credits and sources** — H2 Fraunces 600 40px 'Credits and sources'. Column 1 'Episode' (mono 500 12px Pencil label): 'Hosted by Maren Okafor & Teddy Lindqvist' ([HOSTS]); 'Research and script: Ingrid Solberg'; 'Watercolors commissioned for this companion'; 'Charts drawn from the company's harvest ledgers'. Column 2 'Sources': 'Halvorsen Ice Co. harvest ledgers, 1856–1934, Coldbrook Historical Society, boxes 3–19'; 'Port Ellery harbor master's logs, 1870–1910'; '"Cold Storage on Lake Varden", Coldbrook Gazette, 12 March 1952'; 'Interview with Solveig Halvorsen Byrne, the founder's great-granddaughter, recorded for this episode'. Column 3 'Archival images': 'Exhibits 1.1, 2.2, 3.3 — Brown Bros., in The New Student's Reference Work, 1914. Public domain, via Wikimedia Commons.'; 'Exhibit 5.2 — Popular Science Monthly, vol. 39, 1891. Public domain, via Wikimedia Commons.' Note in Source Serif italic 15px Pencil under the columns: 'The Halvorsen Ice Company, Lake Varden, Coldbrook and Port Ellery are fictional, written for this companion. The archival photographs and the engraving are real public-domain images.' Next-episode card: Print fill, 1px Rule border, a 140px Moss Blot in its corner; 'NEXT · EPISODE 48' mono 12px Pencil; 'Paper Routes' Fraunces 600 32px; 'How a newspaper's delivery boys built the city's first parcel network, 1902–1961.' Source Serif 17px; a mono 12px Pencil line 'Companion in progress'.
   Layout: id 'credits'. Padding 120px 0 96px. Three columns at ≥1024px (gap 48px), one column below; each list item Source Serif 16px/1.5 Graphite with 12px between items. The next-episode card sits below at max 560px, left-aligned, with 64px above.
   Motion: Columns reveal with an 80ms stagger.
14. **Footer** — Left: blot mark (22px) + '[BRAND]' in Fraunces 600 20px, and under it 'Long episodes, read slowly.' in Source Serif italic 15px Graphite. Center links (mono 12px uppercase Graphite, hover Ink): 'Back to top' (#top), 'Chapters' (#ch-1), 'Lessons' (#recap), 'Credits' (#credits). Right: '© [BRAND]' in mono 12px Pencil and, if [CREDIT] is kept, a small 'Template by VibeFather' link in mono 12px Pencil.
   Layout: 1px Rule top border, padding 48px 0 64px, inner 1280px container, three-part flex row with space-between; stacked and left-aligned under 768px with 24px gaps.

## Assets
- font: Self-hosted through Fontsource npm packages: @fontsource-variable/fraunces (full.css + full-italic.css for the opsz and SOFT axes), @fontsource-variable/source-serif-4 (index.css + wght-italic.css), @fontsource/ibm-plex-mono (400.css, 500.css), @fontsource-variable/caveat (index.css). Vite bundles the woff2 files into dist/.
- icon: lucide-react only, stroke width 1.75, colored from the palette: ArrowDown, ChevronRight, Bookmark, BookmarkCheck, RotateCcw, RotateCw, Copy, Check, X. No emoji.
- icon: public/favicon.svg, hand-written: the irregular Ochre blot with a Lake Indigo ring described in Head. Reused inline as the 22px mark in the top bar and footer.
- image: Download https://media.vibefather.ai/assets/f1078151-24ba-4743-8f74-3d6057d292f1/hero-lake.webp to public/images/watercolor/hero-lake.webp. Alt: 'Watercolor of a frozen lake at dawn, scored into a grid of ice channels, with a tall wooden icehouse on the shore.' Used in: Hero. Generated for this template; may be redistributed with it.
- image: Download https://media.vibefather.ai/assets/f1078151-24ba-4743-8f74-3d6057d292f1/ch1-lake-grid.webp to public/images/watercolor/ch1-lake-grid.webp. Alt: 'Watercolor of an ice saw, tongs and freshly cut ice blocks on a frozen lake.' Used in: Chapter 1 opener.
- image: Download https://media.vibefather.ai/assets/f1078151-24ba-4743-8f74-3d6057d292f1/ch2-icehouse.webp to public/images/watercolor/ch2-icehouse.webp. Alt: 'Watercolor of a tall windowless icehouse with an inclined elevator and a schooner at the pier.' Used in: Chapter 2 opener.
- image: Download https://media.vibefather.ai/assets/f1078151-24ba-4743-8f74-3d6057d292f1/ch3-route.webp to public/images/watercolor/ch3-route.webp. Alt: 'Watercolor of a harbor-town street in the morning with a plain delivery wagon at the curb.' Used in: Chapter 3 opener.
- image: Download https://media.vibefather.ai/assets/f1078151-24ba-4743-8f74-3d6057d292f1/ch4-thaw.webp to public/images/watercolor/ch4-thaw.webp. Alt: 'Watercolor of an unfrozen lake in winter with an empty icehouse, its doors open.' Used in: Chapter 4 opener.
- image: Download https://media.vibefather.ai/assets/f1078151-24ba-4743-8f74-3d6057d292f1/ch5-plant.webp to public/images/watercolor/ch5-plant.webp. Alt: 'Watercolor of a brick ice factory with a smokestack at dusk and an old icehouse across the lake.' Used in: Chapter 5 opener.
- image: Download https://upload.wikimedia.org/wikipedia/commons/d/d2/NSRW_Ice_Harvesting_-_sawing.jpg to public/images/archive/ice-sawing.jpg. Alt: 'Workers sawing ice cakes free on a frozen lake, horses and sledges behind them.' Used in: Exhibit 1.1. Source page https://commons.wikimedia.org/wiki/File:NSRW_Ice_Harvesting_-_sawing.jpg — Brown Bros., The New Student's Reference Work, 1914. Public domain.
- image: Download https://upload.wikimedia.org/wikipedia/commons/b/be/NSRW_Ice_Harvesting_-_ice_elevator.jpg to public/images/archive/ice-elevator.jpg. Alt: 'An inclined ice elevator carrying blocks up the side of a large icehouse.' Used in: Exhibit 2.2. Source page https://commons.wikimedia.org/wiki/File:NSRW_Ice_Harvesting_-_ice_elevator.jpg — Brown Bros., 1914. Public domain.
- image: Download https://upload.wikimedia.org/wikipedia/commons/1/18/NSRW_Ice_Harvesting_-_tools.jpg to public/images/archive/ice-tools.jpg. Alt: 'Ice tongs, saws, picks and a spring scale laid out on wooden boards.' Used in: Exhibit 3.3. Source page https://commons.wikimedia.org/wiki/File:NSRW_Ice_Harvesting_-_tools.jpg — Brown Bros., 1914. Public domain.
- image: Download https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/PSM_V39_D031_Interior_of_an_ice_factory.jpg/1280px-PSM_V39_D031_Interior_of_an_ice_factory.jpg to public/images/archive/ice-factory.jpg. Alt: 'Engraved cutaway of an ice factory with a compressor, freezing tank and storage room.' Used in: Exhibit 5.2. Source page https://commons.wikimedia.org/wiki/File:PSM_V39_D031_Interior_of_an_ice_factory.jpg — Popular Science Monthly, vol. 39, 1891, author unknown. Public domain.
- image: Everything else is drawn in code: watercolor blots and bands (Blot + SVG filters), all eleven exhibits, the ruler, the ice blocks, the torn-paper edge and the paper grain. No other bitmaps.
- image: ASSETS.md at the project root lists every third-party file: path, source URL (download URL and the Commons file page), author and license — the four archival images as 'Public domain', the six watercolors as 'Generated for this template, redistributable with it', and the four Fontsource fonts as OFL-1.1.
- image: If [EPISODE_TITLE] or [SUBJECT] differ from the defaults, do not use the six watercolor files or the four archival images (they show this ice story). Draw each painting slot with WatercolorScene instead: an SVG at the same aspect ratio made of three stacked Blot bands (sky, land, water or street) in the chapter's color family plus three to five simple silhouette shapes for the new subject, all through #wc-bleed and the same feathered mask. For the prints, use public-domain or CC0 images of the new subject from Wikimedia Commons (files marked Public domain or CC0 only, checked to download), or draw a tinted SVG print with a short label. Update ASSETS.md to match.

## Don'ts
- No backend: no server code, API routes, databases, auth, analytics or third-party APIs. Notes and the Skim setting live only in localStorage. There is no audio player and no form that submits anywhere.
- No fonts from fonts.googleapis.com, fonts.gstatic.com, Adobe Fonts or any CDN. Self-host through the Fontsource packages listed.
- No CDN <script> or <link> tags. Every script, style, font, icon and image is bundled or downloaded into the project. Never hotlink the image URLs at runtime.
- No source maps in the production build (build.sourcemap: false), and do not copy src/ into dist/.
- Relative asset paths only (Vite base './'). Internal links are hash anchors on this page (#top, #map, #ch-1 … #ch-5, #recap, #credits) or file names like ./index.html, never a bare directory.
- Do not change the stack (Vite + React + TypeScript + Tailwind 3.4 + Motion + Lucide + Fontsource) unless the user asks. No chart library: every chart is hand-written SVG.
- Do not reuse any real podcast's name, hosts, episode titles, branding or copy, and do not make a real company the subject. The default story, people, places and numbers are fictional and must stay that way.
- No real people's likeness: no portraits of hosts or founders, no recognizable faces in the paintings, and no faces as the hero image.
- No brand logos, product names or AI-tool branding anywhere, and no lettering, signage or company names inside the images.
- No Unsplash, Pexels, Pixabay or other stock-site images, no placeholder-image services, nothing CC BY-NC or CC BY-SA. Only the listed generated watercolors and public-domain / CC0 images, all recorded in ASSETS.md.
- No blue-purple gradients, neon glows, glassmorphism cards or drop-shadowed glowing buttons. Color comes from the paper palette and the watercolor washes only.
- Do not stretch the narrative over the charts: body text stays at a 680px measure and the exhibits at 880px. No full-width text blocks.
- Must work at 1440×900 and 390×844 with zero console errors and no horizontal scroll. Respect prefers-reduced-motion as described.
- No SEO extras (meta descriptions, Open Graph, JSON-LD, sitemap). A plain <title> and the favicon are enough.

---
Inspired by Illustrated interactive companion to a long podcast episode (Claude artifact showcase) by @bcherny — https://claude.ai/artifact/RdE6uE7WozcP2MLfx3BDky
— Prompt by VibeFather · https://vibefather.ai/t/fieldnotes · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.