TITLE: Outer Planets Travel Bureau — Retro Poster Series

PROMPT: Build a single self-contained HTML page presenting a retro-futurist travel-poster series. Page ground is near-black #14100f with two huge soft radial washes (amber #e8a13a at 16%, plum #7c3f58 at 35%). Layout is a centred flex row: poster, a vertical destination tab rail, and a travel-agency footer column; under 900px it stacks into poster / horizontal tabs / footer row. The poster is a 5:7 aspect box whose width is min(92vw, 30rem, 74dvh*5/7), and its font-size is set to calc(width * 0.045) so every child uses em units and the whole poster scales as one piece — title at 2.35em (~10.6% of poster width), subtitle Georgia italic at .82em, coordinates and bureau strip in ui-monospace at .52em. Inside: an inset 1px rule (poster::after), two stacked .scene layers for cross-fading, and a .type overlay holding a top bureau strip ("Outer Planets Travel Bureau" / "Series 04 / Plate 01"), and a bottom title block with a two-line display title in "Arial Narrow"/Impact uppercase wide-tracked, a Georgia italic subtitle and mono coordinates. Each scene (built as an innerHTML string) contains: a vertical sky gradient, a halftone sky of radial-gradient dots (1.15px dots, 7px tile) masked to fade downward and drifting 7px diagonally over 26s, an optional star field of eight tiny radial dots, a sun with two concentric ring outlines, a planet built from a radial gradient plus a clipped .ball holding a scrolling repeating-linear-gradient band texture (34s spin) and a limb shading layer, an optional ring drawn as a 186%-wide 2px circle with scaleY(.2) and -16deg rotation, a moon, a clip-path polygon mountain silhouette with vertical hatching, a dashed trajectory path with pathLength="100" that draws and un-draws over 18s, and a rocket riding the arc via two nested keyframe layers (linear X from -9% to 108% of poster width, eased Y from 82% to 19% of poster height) with a steps(2) flame. Palette: cream #f4e3c1, mars #d94f2b, deep #2b3a67, sun #e8a13a, plum #7c3f58. Four destinations — Titan, Mars Grand Tour, Europa Ice Ferry, Io Volcano Line — each with its own sky/planet/ring/moon/horizon variables, ink colour and accent colour. Tab rail buttons show a mono index, an uppercase display name and three colour chips. All JS in one IIFE at the end of body; no external assets; no SVG namespace strings (the only SVG is static inline markup in an innerHTML template).

DESCRIPTION: A rack of four hand-silkscreened posters in a dim bureau. Each plate is a whole world: halftone sky, geometric sun, a banded planet with a hairline ring, and a rocket on a dashed arc that draws itself across the sky. Choosing a destination cross-fades one plate into the next — sky, planet, horizon, type colour and accent all swap together — while the poster's title block, coordinates and plate number update. Hovering the planet surfaces a dry one-line fact. Booking stamps a red passport mark on the poster in a random spot, and the marks pile up until the plate is retired.

TECHNIQUES: two-layer opacity cross-fade for a full palette + scene swap; halftone sky from a single repeating radial-gradient tile with a mask-image fade and a seamless 7px transform drift; clip-path polygon horizon with repeating-linear-gradient hatching; radial-gradient planet with a clipped inner .ball scrolling its band texture for rotation; dashed stroke draw-on via pathLength="100" plus stroke-dashoffset keyframes; two-axis keyframe flight path (linear X, eased Y) to approximate an arc; CSS-only rocket with a steps(2) flame flicker; em-based type scale derived from a calc() of the poster's own width so the whole plate scales proportionally; destination data table driving innerHTML scene templates and CSS custom properties.

INTERACTION: Clicking a destination tab (or pressing ArrowLeft/ArrowRight) cross-fades the poster to that world over 0.8s and swaps the title, subtitle, coordinates, plate number, ink and accent colours. Hovering the planet reveals its fact in a mono tooltip that lifts 6px into place. Clicking BOOK NOW stamps a rotated passport mark with the current destination and year at a random position inside the poster, increments the passport counter and retires the oldest mark after seven. Under prefers-reduced-motion the halftone drift, planet spin, rocket flight, trajectory draw and flame flicker stop, the trajectory renders fully drawn, and scene/type colour transitions are instant.