blog-post

1# Blog Post Skill
2 
3Produce a single long-form article page — editorial layout, no chrome.
4 
5## Workflow
6 
71. **Read the active DESIGN.md** (injected above). Lean into the typography
8   tokens — long-form is 70% type, 20% image, 10% chrome.
92. **Pick the topic** from the brief and write a real article — at least 600
10   words across 4–6 H2 sections. No lorem ipsum.
113. **Sections**, in order:
12   - **Masthead** — small wordmark + 4–6 nav links, plain.
13   - **Article header** — category eyebrow, headline (display token, large),
14     deck (1–2 sentence subhead), author name + role + date.
15   - **Hero image** — a 16:9 placeholder block using a DS-tinted gradient or
16     solid fill (no external images). Add a 1-line caption underneath.
17   - **Body** — alternating prose paragraphs with at least:
18     - 1 pull quote (large display type, accent rule on the inline-start edge so the layout flips correctly under `dir="rtl"`).
19     - 1 figure (image placeholder + caption).
20     - 1 list (numbered or bulleted).
21     - 1 inline blockquote.
22   - **Author footer** — author avatar (initials in a circle), bio paragraph.
23   - **Related** — 3 cards linking to other posts. Each card: tiny image
24     block, title, 1-line excerpt, date.
254. **Write** a single HTML document:
26   - `<!doctype html>` through `</html>`, CSS inline.
27   - Article body uses the DS body font, centered, max-width per DS layout
28     rule (typically 680–720px).
29…