# Asymmetric type lockup hero > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The top of the site for Quarto, a fictional Lisbon poetry press. The brand name is the composition: **QUA** sits in columns 1–8 at 160px italic Playfair Display, **RTO** sits in columns 6–13 on the next row, right-aligned and pulled up 28px so the two halves almost lock. A 14px Karla paragraph occupies the leftover cell (columns 9–13 of the first row), tucked against the A. One underline text button is the only CTA. Letters rise on load with a 70ms stagger; Replay and a click on the stage restart them. ## Reference behaviour 1. Initial state: warm apricot paper (`#f3e4d2`). A 64px nav with italic "Quarto" mark, three links (Catalogue is current), and a brick "Subscribe" on the right. Below: an 11px uppercase kicker "Poetry in print · Lisbon". 2. On load, body has class `play`. The three letters of QUA rise from `translateY(108%)` + opacity 0 to rest, 720ms expo-out, delays 0 / 70 / 140ms. RTO uses the same animation with a 240ms base delay (240 / 310 / 380ms). 3. The nest paragraph fades and rises 10px over 640ms, delay 620ms. The CTA does the same, delay 780ms. 4. Hovering the CTA turns text and underline `--accent` (`#a33a24`); the 16px arrow translates 4px right over 160ms. 5. Nav links: hover or `aria-current` turns colour `--ink` and draws a 1px ink underline. Subscribe hover adds a 1px accent underline. 6. Clicking Replay, or clicking the stage anywhere except a link, removes `play`, forces reflow, and adds `play` again so every entrance restarts from zero. 7. Links with `href="#"` call `preventDefault` in the demo. 8. Reduced motion: letters, nest and CTA render in their final position with no animation. ## Structure ``` 1280 × 800, margins 48, 12 cols, gutter 16 ┌──────────┬──────────────────────────┬────────────┐ │ Quarto │ Catalogue Authors Events │ Subscribe │ nav 64, 1px rule ├──────────┴──────────────────────────┴────────────┤ │ —— Poetry in print · Lisbon │ kicker 11 │ │ │ Q U A Twelve poets on the │ 160px italic │ weather of a city… │ nest 14 / 1.55 │ R T O │ 160px, −28px │ Open the autumn list → │ underline CTA │ │ │ Vol. XII 128 pages Edition of 800 28 € │ meta, 1px rule │ Autumn Smyth-sewn Lisbon + mail incl. post│ │ [REPLAY] │ └───────────────────────────────────────────────────┘ ``` - `