# Style Guide — Briefing HTML

## Output Contract

- One file: `outputs/briefing.html`.
- Self-contained except for these two CDN scripts and Google Fonts:
  - Tailwind: `<script src="https://cdn.tailwindcss.com"></script>`
  - D3 v7: `<script src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"></script>`
- No other external CSS, JS, or images.
- Opens in any modern browser by double-click. No build step, no bundler.
- Responsive down to a 390px-wide phone viewport — including the D3 charts (use SVG `viewBox`).

## Language

- Default copy to Thai. Keep English product terms (LINE, Facebook, YouTube, TikTok, LinkedIn, Messenger, Reddit, X) as-is.
- Numbers use Thai-readable formatting (commas, decimal point). Avoid translating "%" or "M".

## Tone

- Calm, confident, advisory. Like a senior strategist briefing a team.
- No hype words ("revolutionary", "game-changing").
- No emoji unless used as a careful data marker (e.g., ▲ ▼).

## Aesthetic Direction

Pick **one** intentional aesthetic and execute it precisely. The Skill will guide the choice — do not default to:

- Purple-on-white gradients.
- Inter, Roboto, Arial, or system-ui as the only font.
- Centered hero + three-column feature grid.
- Generic stock-photo backgrounds.

Stronger directions to consider:
- Editorial / magazine (serif display + restrained sans body).
- Thai-modern (well-paired Thai display face with confident negative space).
- Quiet luxury (warm neutrals, generous spacing, one accent color).
- Data-first newsroom (mono headers, dense table, single accent).

## Required Structure

In order:

1. Hero band with the one-sentence picture and the headline number.
2. Reach table from the CSV, sorted by reach.
3. Three take-aways (each cites a specific platform row).
4. Caveats list.
5. Next action callout.
6. Footer with source citation and the access date from the CSV header.

## Chart Aesthetic

Charts are part of the editorial, not a separate visual language:

- **SVG only**, not canvas. Use `viewBox` so they scale fluidly.
- **Typography matches the page**: serif (Noto Serif Thai) for platform names, mono (IBM Plex Mono) for axis labels and numbers.
- **Palette is the page palette** — oxblood for ad reach, gilt for MAU, lighter oxblood for ad reach 18+, ink-3 for registered members. Never use default D3 categorical colors.
- **Color-code by basis type**, not by platform. The point of the chart is the editorial argument about comparability, not a rainbow legend.
- **Hairline gridlines** (≤1px, ~8% black), generous whitespace, no chartjunk, no 3D effects, no shadows on bars.
- **Outliers get callouts, not crushed scales** — e.g., Reddit +458% renders in a dashed off-chart box with the value labeled, while the main chart's axis stays sane.
- **Watch-list / flagged data** uses diagonal hatching (`pattern`), not a bright warning color.
- **Animate on scroll-into-view** using `IntersectionObserver`. Stagger bar/dot/rect entrances over 600–900ms total.
- **Hover tooltips** show platform name, value, YoY, and basis. One shared floating tooltip element is fine.

## Footer Citation

Include the source URL and access date verbatim from the CSV header comment block.
