Meridian. Built from one prompt.

Build a scroll-driven storytelling page for a fictional expedition journal called "MERIDIAN" using React, TypeScript, Vite, Tailwind CSS. Four full-screen chapters; the page background is ONE fixed gradient layer whose colors interpolate with scroll progress.

FONTS: "Cormorant Garamond" (500, 600 italic) for display, "Inter" (400, 500) for body, from Google Fonts. Utilities `.font-cormorant` and `.font-inter` in src/styles.css.

SKY LAYER: `fixed inset-0 z-0` div whose background is set from a scroll handler. Define four sky stops as [top, bottom] hex pairs:
- DAWN: ["#f7d9c4", "#b8c6db"]
- NOON: ["#7ec8e3", "#e8f4f8"]
- DUSK: ["#f4a26b", "#4a3f6b"]
- MIDNIGHT: ["#0b1026", "#1d2951"]
On scroll, compute progress p = scrollY / (docHeight - innerHeight), map it across the four stops with linear interpolation of each RGB channel, and set `background: linear-gradient(180deg, top, bottom)`. Use a requestAnimationFrame-throttled scroll listener (one rAF per frame max).

CHAPTERS: four `<section class="relative z-10 h-screen flex items-center px-6 sm:px-12 lg:px-24">` blocks, alternating text alignment (1 left, 2 right, 3 left, 4 right):
1. "First light" — kicker "06:12 — RIDGE CAMP", body "We left before the valley woke. Forty kilometers of unnamed ridgeline between us and the meridian marker."
2. "The white hours" — kicker "12:40 — SNOWFIELD", body "Noon erased every shadow. We navigated by compass bearing alone, counting paces between cairns."
3. "Descent in amber" — kicker "18:55 — WEST COULOIR", body "The light went long and golden as we dropped into the couloir, ropes singing against the granite."
4. "The still meridian" — kicker "23:58 — SUMMIT PLATEAU", body "At the marker we stood in complete silence. The sky ran the whole spectrum above our heads."
Chapter headings in `font-cormorant italic text-[clamp(2.6rem,7vw,5.5rem)] leading-[1.02] tracking-[-1px]`, kickers in `font-inter text-[11px] tracking-[0.35em] uppercase opacity-60 mb-5`, body `font-inter text-sm sm:text-base max-w-md leading-relaxed opacity-80 mt-6`. Text color `#1d1a16` on chapters 1-2, `#f3ede2` on chapters 3-4.

Each chapter's inner content wrapper starts `opacity-0 translate-y-8` and transitions to visible via an IntersectionObserver (threshold 0.35) that adds a `.chapter-in` class: `transition: opacity 0.9s ease, transform 0.9s ease`.

PROGRESS RAIL (fixed right-6 top-1/2 -translate-y-1/2 z-20, hidden on mobile): four 8px dots, `bg-current opacity-30`, active chapter's dot scales 1.6x and opacity 1, color follows the chapter text color. TOP BAR: fixed, "MERIDIAN" left in `font-inter text-[12px] tracking-[0.4em]`, "AN EXPEDITION IN FOUR SKIES" right, both uppercase, mix-blend-difference text-white. Single App.tsx + src/styles.css.

scrollgradientstorytelling