Make a tall Stories picture for each listing: hero photo, price and the Just listed / Open house / Sold line, sized 1080 × 1920 #130

Intent: the listing already makes a 1080 × 1080 square picture for feed posts (/listings/:id/card). Agents post as much to Instagram and Facebook Stories, which are 9:16; a square there is letterboxed and looks amateur in the meeting.

Done looks like:

• [ ] /listings/:id/card?shape=story renders a 1080 × 1920 picture in the agent's brand: the hero photo filling the top, the same headline as the square (cardHeadline: Just listed / Open house / Under contract / Sold), the price, beds/baths/sq ft and the agent's name and phone, server-rendered with no JavaScript and no remote assets. Any other shape value is the square as today.
• [ ] The listing's social tab shows "Stories picture" beside "Square picture".
• [ ] It obeys the same read rule as the square picture (asked through permit via getListing); a listing with no photos gets the brand fill, as the square does.
• [ ] The image has explicit width and height so nothing shifts as it loads, and the hero img keeps its photo alt text.
• [ ] A new component class is documented in docs/design/areas/<area>.md, and bun scripts/design-lint.ts passes.
• [ ] Tests in src/card.test.ts: the story shape has the 1080 × 1920 frame and the same headline as the square for each status; an unknown shape falls back to the square; the hostile listing stays escaped.
• [ ] The README step about the square picture mentions the Stories one.

Files likely: src/pages/card.ts, src/routes.ts (read the query), src/pages/listing.ts, src/web/ styles, src/card.test.ts, README.md.

Risks: long addresses must wrap, not overflow, at 1080 wide; keep the square page unchanged. Do not loosen any contract cell.

Suggested crew: builder.