# Creator profile with masthead > **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 A profile page for a fictional Kathmandu essayist, Mira Joshi. The first frame is a paper-coloured masthead: a 13px olive kicker, a 104px Literata name, four role chips, a one-sentence italic bio, then a 3-up strip of recent work and a subscribe row for "The Sunday letter". Public Sans carries the UI. Do not use Fraunces — that is the Lounge house face. Olive is the single accent. The page should feel like the front of a slim journal, not a social profile. ## Reference behaviour 1. Initial state: chips "Essayist" and "Editor" are `aria-pressed="true"` (ink fill, paper type). "Speaker" and "Teacher" are unpressed (1px `--line` border). The email field is empty. Subscribe is enabled. 2. Click a chip: it toggles pressed independently (these are roles she claims, not exclusive filters). Pressed: `#1C1914` fill, `#F6F1E6` type. Unpressed hover: border and type go `--ink`. 3. Hover a work card: 1px border becomes `--ink`, the card lifts 3px over 320ms. Focus-visible uses the same lift plus the olive ring. 4. Submit subscribe with an empty or invalid value: the live region reads `Enter a full address.` and the field is focused. Valid pattern: one `@`, a dot in the domain, no spaces. 5. Valid submit: button label becomes `Subscribed`, class `ok` (ink fill), button and input `disabled`. Live region: `Next letter: Sunday 4 Oct.` 6. Nav "Essays" is current (1px olive underline). Index and Subscribe scroll to `#work` and `#sub`. 7. Reduced motion: durations 1ms; cards do not lift. ## Structure ``` 1280 × 800 ┌────────────────────────────────────────────────────────────────────────┐ │ Mira Joshi (italic 18) ESSAYS INDEX SUBSCRIBE │ 54 ├────────────────────────────────────────────────────────────────────────┤ │ KATHMANDU · ESSAYS, 2019–2026 │ │ Mira Joshi (104px Literata, −0.035em) │ │ [Essayist] [Editor] [Speaker] [Teacher] chips 32px, 8px gap │ │ Long pieces on rooms, rivers… (20px italic, 48ch) │ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │ │ plate 120 │ │ plate 120 │ │ plate 120 │ │ │ │ A kitchen… │ │ Keeping a… │ │ The river… │ cards 248 min │ │ └──────────────┘ └──────────────┘ └──────────────┘ │ │ The Sunday letter (28px italic) │ [ email ] [ Subscribe ] │ └────────────────────────────────────────────────────────────────────────┘ Side pad 56px. Work gap 16px. Subscribe row has a 1px ink top rule. ``` - `