/pdf-report-editorial

name: pdf-report-editorial
description: |
  An editorial-styled PDF report rendered from HTML via the browser:
  "PDF report", "whitepaper", "executive brief", "research report",
  "case study PDF". Read-as-document, not slides.
when_to_use: |
  A polished portable, printable document where typography and layout matter.
  Use pptx-editorial or html-deck-editorial instead when the user wants slides.
tags:
  - pdf
  - report
  - whitepaper
  - editorial

Editorial PDF Report

You will generate one `.pdf` file via a two-step pipeline:

1. Write a self-contained HTML file to the workspace using `workspace_file_tool` (or `file_tool`). 2. Call **`browser_navigate`** on the workspace-relative path (or the file's `file://` URL), then call **`browser_pdf`** with `output_filename="report.pdf"`, `format="A4"`, `print_background=true`. Page margins are controlled by CSS `@page` rules in the HTML (see "@media print" section below) — `browser_pdf` does not accept a `margin` object. 3. Report both the .html path (for editing) and the .pdf path (final).

⚠️ Hard rules — NO exceptions

0. **MATCH THE USER'S LANGUAGE.** If the prompt is Chinese (中文), ALL report content (kickers, H1/H2, body, captions, table headers, figure callouts) must be in Chinese. NEVER copy English template phrases like `EXECUTIVE BRIEF` / `RESEARCH BRIEF` / `THE BOTTOM LINE` into a Chinese report — translate them. Person/company names should match the locale.

1. **One palette only.** Pick one of the 5 palettes below; never invent hex. 2. **Two fonts only.** Display = `'Playfair Display', Georgia, serif`. Body = `'Inter', -apple-system, Helvetica, sans-serif`. Load Playfair Display + Inter via single Google Fonts `<link>` (only external resource allowed). All other CSS / JS inline. 3. **Forbidden visual elements:**

• drop-shadow, box-shadow, gradient backgrounds, blur, glassmorphism
• rounded corners > 2px
• emoji as decoration, clipart, stock-photo placeholders
• colored hyperlinks (links must be `ink` color + underline)
• centered body paragraphs (left-align only)
• all-caps body text (kicker / labels only)
• more than one accent color

4. **Real content only.** No lorem ipsum, no placeholder text, no fabricated data, no fake citations. Citations must reference real sources or be omitted. 5. **Print-aware CSS required:**

• `@page { size: A4; margin: 0; }`
• `@media print` rules for page breaks (no orphan/widow titles)
• `page-break-inside: avoid` on figures, callouts, tables
• `page-break-before: always` on `section.chapter` wrappers or on

the H2 section-divider rule (the cover is the only H1 — see the "Document structure" section and the output checklist).

🎨 Palettes — pick ONE

Each: `ink` (text + rules), `paper` (page bg), `paper-tint` (callout box bg), `ink-tint` (folio + section labels).

• **Monocle** (default / business / tech / policy)

ink `#0a0a0b` · paper `#f1efea` · paper-tint `#e8e5de` · ink-tint `#18181a`

• **Indigo Porcelain** (research / data-heavy)

ink `#0a1f3d` · paper `#f1f3f5` · paper-tint `#e4e8ec` · ink-tint `#152a4a`

• **Forest Ink** (sustainability / impact)

ink `#1a2e1f` · paper `#f5f1e8` · paper-tint `#ece7da` · ink-tint `#253d2c`

• **Kraft Paper** (humanities / qualitative)

ink `#2a1e13` · paper `#eedfc7` · paper-tint `#e0d0b6` · ink-tint `#3a2a1d`

• **Dune** (art / design / fashion criticism)

ink `#1f1a14` · paper `#f0e6d2` · paper-tint `#e3d7bf` · ink-tint `#2d2620`

✒️ Typography (use exactly these scale values)

| Role | Family | Size | Line-height | Weight | |---|---|---|---|---| | H1 (cover title only — used once) | Display | 48pt | 1.1 | 400 | | H2 section / chapter divider | Display | 28pt | 1.2 | 400 | | H3 subsection | Body | 14pt | 1.3 | 600 | | Body paragraph | Body | 11pt | 1.55 | 400 | | Pull quote | Display italic | 22pt | 1.3 | 400 | | Callout box | Body | 11pt | 1.5 | 400 (italic optional) | | Caption / footnote | Body | 9pt | 1.4 | 400 | | Kicker (small caps label) | Body | 9pt, letter-spacing 0.12em, uppercase | — | 500 | | Folio (page number) | Body | 9pt | — | 400 | | Table header | Body | 10pt | 1.3 | 600 | | Table body | Body | 10pt | 1.4 | 400 |

📐 Document structure

A typical editorial PDF has these block types — use as needed by user content:

Cover (page 1)

• Top: small `kicker` (e.g. "RESEARCH BRIEF" or "EXECUTIVE MEMO")
• Center vertically: H1 title (Display 48pt)
• Below: subtitle / dek (Body 14pt italic)
• Bottom-left: author / org · Bottom-right: date / volume

Table of Contents (page 2, optional)

• H2 "Contents" + numbered section list with page numbers (right-aligned)

Section divider (every chapter)

• H2 title + thin `ink` hairline (1px) below
• Optional kicker above (e.g. "PART 02")

Body

• 2-column layout (CSS `column-count: 2; column-gap: 24pt`) for long sections
• 1-column for short / data-heavy sections
• Drop cap (CSS `::first-letter`) for chapter openers (Display, 5em, float left)
• Pull quotes as `<aside>` blocks, Display italic 22pt, with thin top + bottom rules

Figures / tables

• Captioned (caption below figure, Body 9pt italic, prefixed with "Fig. 1 — ")
• Charts as inline SVG using only palette colors
• Tables: thin `ink` rules above header + below header + below last row; no

vertical borders; cell padding 6pt 10pt; striped alternating rows with `paper-tint`

Callouts

• `paper-tint` background block, ink left border 2px, padding 16pt, no shadow

Footer (every page)

• Left: doc title (Body 9pt ink-tint)
• Right: page number (Body 9pt ink-tint)
• Separator: 1px ink hairline above the footer

🛠️ HTML skeleton

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>...</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;1,400&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<style>
@page { size: A4; margin: 0; }
:root { --ink: #0a0a0b; --