Codex rebuilt three GSAP demos as Webflow animations you can retime

Build an event landing page for a dance company's one-night performance, styled as a painted theatre bill. It must be a real page a venue could ship, not a poster.

Structure, top to bottom:
1. A slim top bar: wordmark left in a fat slab face, three text links right.
2. The bill: a two-column row. Left: a small uppercase mono kicker, a 19ch slab headline, a 21px deck. Right: a buy-box card in ivory with a 2px rule under its title and issue or event number, a definition list of four labelled rows (Date, Running time, Programme, Headliner), and one full-width green button that books or links to the main action.
3. A contained painted plate inside a proscenium arch: the top corners rounded into a shallow arch with an elliptical border-radius, a 3px amber border thickening to an 8px footlight edge at the bottom, a 21:9 crop on desktop and 4:3 on mobile.
4. An overture block on two columns: the show's name and one italic line left; a short paragraph and an eight-item credits list in two columns, hairlines between, small amber mono numerals.
5. The programme: a 200px sticky running order rail beside a 760px content column. The rail is an ordered list of anchor links, each a slab numeral matching its section's numeral (the interval gets a short amber bar instead) and a label; the link for the section in view gets a solid green fill with dark text and aria-current, set by a small IntersectionObserver. Each section opens with a numeral in a 56px outlined circle, an uppercase mono label, then a slab h2. Items inside a section are an h3 plus one or two paragraphs, separated by hairlines.
6. A cue list: three rounded cards on a slightly lighter ground, a mono label column (Cue one, Cue two, Cue three) beside a bold title and one sentence.
7. An interval: an ivory band (the house lights coming up) holding one large italic pullquote in dark ink whose words darken one by one as it scrolls into view, using CSS animation-timeline: view() inside @supports, fully visible without it.
8. A pattern section: a square painted detail beside a lede and three labelled rows.
9. An encore: a ticket card with a dashed perforation between a stub (title, one line, copy button) and the main body holding a monospace block.
10. A closing note, a numbered sources list, previous and next links, and a colophon.

Palette: house ground #25110F flat, raised panels #331816, ivory text and cards #F3E6D3, viridian button #3FA371 with dark text #1E0D0B, link and outline green #6CC596, amber labels #D9A441, dusty rose captions #C9A69A. Type: Alfa Slab One for display and numerals only, Alegreya Sans for body and italics, IBM Plex Mono for labels and code.

Imagery: gouache paintings on cold-press paper in the same five colors, a theatre from the back of the stalls for the plate and a stage manager's cue desk for the detail. No legible text in images, no logos.

Guardrails: body 19px with 1.7 line height and a 60-75 character measure, never justified; every label at WCAG AA against its real surface; radius 14px on cards, 8px on buttons and rail links, circles only for the act numerals; one shadow, on the buy-box; no neon, glow, or gradients; hover and focus states at 150ms; a prefers-reduced-motion rule that removes the word reveal and smooth scrolling; on mobile the rail becomes a horizontal strip pinned to the top and the buy-box stacks under the headline.