Designing Book Interior Layouts

Given a book's cover description, genre, and target audience, execute this pipeline:

Input: Cover shows minimalist ink-brush mountains, genre = literary fiction/memoir,
constraint = no ornamental ❦, no Syne font

Output:
1. 5 Google Fonts pairings (title/author/body) with rationale
2. Simulated 5-agent design council debate → 1 winning pairing
3. Single HTML/CSS/JS file: 4-page spread prototype at 14.8x21cm
4. Single HTML/CSS/JS file: typography spec sheet + copyable SVG decorations (#000/#fff variants)

Never skip phases. Never ask the user to confirm between phases unless they explicitly request checkpoints — run the full pipeline in one response by default.

Progress checklist to include mentally (and in output when the task is large):

• Phase 1: Generate 5 font pairings
• Phase 2: Run council debate, select 1 winner
• Phase 3: Build 4-page HTML/CSS/JS prototype
• Phase 4: Build spec documentation + SVG extraction doc

Phase 1 — Typography Exploration

For each of 5 pairings, specify:

• Title font: must look strong in both UPPERCASE and Title Case. Prefer distinctive serif/display fonts (e.g., Fraunces, Newsreader, Spectral, Cormorant, Bricolage Grotesque, Litera-style faces) — avoid generic defaults (Playfair Display, Montserrat, Lora, Merriweather, Roboto) unless genuinely the best fit, and avoid any font in the user's negative-criteria list.
• Author font: harmonizes with title (same superfamily, or complementary contrast — e.g., geometric sans against humanist serif).
• Body font: MUST have full family (Regular, Italic, Bold, Bold Italic) available on Google Fonts — verify this mentally; reject fonts with incomplete families (many display fonts only have 1-2 weights).
• Provide a short visual mockup in text form, e.g.:

  TITLE: THE QUIET ARCHIVE (Fraunces, 700, uppercase, tracking +2%)
  Author: by Rania Wibowo (Fraunces Italic, 400)
  Body: "Morning light fell across..." (Newsreader, 400, 11pt/16pt leading)
  

• Justify each pairing against the cover mood, genre conventions, and audience (e.g., YA vs. literary vs. technical nonfiction expect different voice).

Phase 2 — Design Council Debate

Simulate 5 distinct agents with genuinely different priorities, not agreement theater:

1. Art Director — overall mood/brand coherence with cover
2. Lead Typographer — kerning, x-height, optical sizing, pairing contrast quality
3. Editorial Designer — genre convention fit, reader expectation
4. Accessibility Specialist — legibility at body size, line-length, contrast, dyslexia-friendliness
5. Production Engineer — font licensing/embedding reliability, print rendering at small sizes, file weight

Structure as short back-and-forth exchanges (2-4 lines each agent, referencing specific pairings by number), surface at least one real disagreement, then converge on a single winning combination with a one-paragraph joint rationale. State explicitly which of the 5 pairings won.

Phase 3 — 4-Page Prototype

Build ONE self-contained HTML file (inline <style> and <script>) with:

• Two page-spreads (pages 1-2, then 3-4), each spread = two .page divs side by side (even on left, odd on right, or per print convention — verify odd pages fall on the right).
• .page { width: 148mm; height: 210mm; }, centered on screen, box-shadow for lift-off-background effect, white background, black text.
• margin: 20mm implemented as inner padding or a content-box inset — do not confuse CSS margin (page gap) with the book's print margin (use padding for the safe text area).
• Body text: use the winning body font, real prose sample (write plausible sample text matching the genre — don't use lorem ipsum), first paragraph of each chapter/section with a drop cap, subsequent paragraphs with first-line indent and no space-between (standard trade book convention).
• Chapter opening page: title font for chapter heading, generous top whitespace, one restrained decorative element that echoes the cover motif (e.g., a thin rule, a small line-art glyph) — never the ❦ character or any explicitly forbidden element.
• Page numbers ("folios"): styled with a small ornamental treatment (e.g., flanked by thin rules or a tiny custom SVG glyph), positioned per convention (outer bottom corner or centered footer).
• Include @media print rules sized to the physical page for realistic printing/PDF export.
• Keep JS minimal — only if needed for a live font-size/leading toggle demo; not required.

Phase 4 — Spec Documentation + SVG Extraction

Second self-contained HTML file containing:

1. Embedded/scaled-down replica of the 4-page layout (read-only reference, can reuse Phase 3 markup at reduced scale).
2. A typography table per text role (Chapter Title, Author Line, Body Text, Drop Cap, Folio, Running Head if any) listing: Font Family, Weight/Style, Font Size (pt and px), Line Height, Letter Spacing, Color.
3. A dropdown/select (native <select> or accordion) that switches between every decorative SVG element used in the design. For each decoration, show it twice — once with fill="#000000" and once with fill="#ffffff" on a contrasting swatch background — inside a <pre> or <textarea readonly> block containing the raw <svg>...</svg> markup, plus a "copy to clipboard" button (simple navigator.clipboard.writeText).
4. All SVGs must be original simple line-art (geometric rules, small botanical/architectural motifs matching the cover) — never the ❦ glyph or anything on the negative-criteria list.