npm - @rubytech/create-maxy-code - Versions diffs - 0.1.26 → 0.1.27 - Mend

@rubytech/create-maxy-code 0.1.26 → 0.1.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (449) hide show

package/payload/platform/plugins/brochures/skills/property-brochure/references/template.html ADDED Viewed

@@ -0,0 +1,2370 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Property Folio — Template</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+<style>
+  /* ═══════════════════════════════════════════════════
+     EDITORIAL PROPERTY FOLIO — CANONICAL TEMPLATE
+     A4 landscape (297 × 210 mm) — 16-page super-premium folio.
+     Reference register: Knight Frank country-houses / Strutt & Parker.
+     Type: Cormorant Garamond (display, italic-default at hero)
+           Lora (humanist serif body)
+           Inter (numeric labels, particulars)
+     Palette: ivory paper · ink · bronze · antique gold · champagne
+     SUBSTITUTION CONTRACT
+     ─────────────────────
+     This file is the CANONICAL template. Every property-specific value
+     is a {{ token }} placeholder — there is no exemplar copy left to
+     accidentally inherit. Substitution is mechanical and verifiable:
+     after rendering, `grep "{{" output/brochure.html` must return ZERO
+     matches. Any remaining {{ x }} is a bug.
+     The full token list, with source field, expected format, length
+     and voice, lives at:
+         references/placeholders.md
+     Each <!-- REPLACE: ... --> inline comment in this file gives the
+     short version (what fills the token, how long, what voice). The
+     placeholders.md file gives the long version with worked examples
+     from the validated muvin Sparrows Farm reference brochure.
+     Re-skin: agents override the design tokens in :root from their
+     brand DESIGN.md per the property-brochure SKILL ("registers" — see
+     references/registers.md).
+     Image filenames follow the pattern {{ property_slug }}-NN.webp,
+     where {{ property_slug }} is the literal slug from the property
+     directory (e.g. "sparrows-farm" or "agincourt-house") and NN is
+     the zero-padded image index per references/images.md.
+     ═══════════════════════════════════════════════════ */
+  :root {
+    /* Super-premium tokens (palette, type) */
+    --teal-900: #0E1418;        /* primary ink */
+    --teal-950: #06080A;        /* deepest surface (cover/back bg) */
+    --teal-700: #2A3036;        /* secondary ink */
+    --gold-500: #A4884C;        /* antique gold rule */
+    --gold-700: #7A6235;        /* bronze accent */
+    --gold-300: #C9B07A;        /* champagne flourish */
+    --paper-0:  #FFFFFF;
+    --paper-25: #F8F4ED;        /* ivory page */
+    --paper-50: #F4EFE5;
+    --paper-100: #EFE7D8;       /* warm cream surface */
+    --slate-600: #5C6470;
+    --slate-400: #8A8E96;
+    --rule:      rgba(14,20,24,0.16);
+    --rule-soft: rgba(14,20,24,0.08);
+    --rule-fine: #E2D5BD;       /* champagne sand */
+    --ink:       #0E1418;
+    --serif: 'Cormorant Garamond', 'EB Garamond', 'Garamond', 'Times New Roman', serif;
+    --body-serif: 'Lora', 'Source Serif Pro', 'Georgia', serif;
+    --sans: 'Inter', 'Söhne', -apple-system, BlinkMacSystemFont, sans-serif;
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+  body {
+    font-family: var(--body-serif);
+    background: #c9c1b1;
+    color: var(--ink);
+    line-height: 1.62;
+    font-weight: 400;
+  }
+  img { display: block; }
+  /* Super-premium body-copy contract: ragged-right, no hyphenation, on warm ivory */
+  .ed-body, .ed-deck, .opener-body p, .feature-page .panel p,
+  .spread-6 .bottom .ed-body, .toc-credit, .mi-foot, .back-tagline {
+    text-align: left !important;
+    hyphens: none !important;
+    -webkit-hyphens: none !important;
+    word-break: normal !important;
+    overflow-wrap: normal !important;
+  }
+  .opener-meta-row, .ed-stat .v, .mi-section .mi-row, .spec-list,
+  .opener-spec, .epc-bars, .attr-grid {
+    font-variant-numeric: tabular-nums;
+    font-feature-settings: "tnum" 1;
+  }
+  /* Download bar (screen only) */
+  .download-bar { position: fixed; top: 18px; right: 18px; z-index: 1000; }
+  .download-btn {
+    font-family: var(--sans);
+    font-size: 11px; font-weight: 400;
+    letter-spacing: 0.18em; text-transform: uppercase;
+    color: var(--paper-0); background: var(--teal-900);
+    border: 1px solid rgba(255,255,255,0.16);
+    padding: 12px 22px;
+    cursor: pointer;
+    display: flex; align-items: center; gap: 10px;
+    transition: background 250ms ease;
+  }
+  .download-btn:hover { background: var(--gold-700); }
+  .download-btn svg { width: 13px; height: 13px; }
+  /* ═══════════════════════════════════════════════════
+     PAGE BOXES
+     ═══════════════════════════════════════════════════ */
+  .page {
+    width: 297mm;
+    height: 210mm;
+    margin: 18px auto 0;
+    position: relative;
+    overflow: hidden;
+    background: var(--paper-25);
+    box-shadow: 0 4px 28px rgba(0,0,0,0.14);
+  }
+  .page:last-of-type { margin-bottom: 22px; }
+  /* Folio (page-number) chrome — the bottom strip on a magazine page */
+  .folio {
+    position: absolute;
+    bottom: 8mm; left: 14mm; right: 14mm;
+    display: flex; justify-content: space-between; align-items: center;
+    font-family: var(--sans);
+    font-size: 9px; font-weight: 500;
+    letter-spacing: 0.32em; text-transform: uppercase;
+    color: var(--teal-900);
+    z-index: 5;
+    pointer-events: none;
+  }
+  .folio > span {
+    background: rgba(252, 251, 248, 0.92);
+    backdrop-filter: blur(10px) saturate(1.2);
+    -webkit-backdrop-filter: blur(10px) saturate(1.2);
+    padding: 5px 10px;
+    border-radius: 2px;
+    box-shadow: 0 1px 0 rgba(6,68,68,0.04);
+    white-space: nowrap;
+  }
+  .folio .folio-mid { letter-spacing: 0.4em; }
+  .folio em { font-style: normal; color: var(--gold-700); font-weight: 500; }
+  /* On dark/photo-heavy pages, swap to light text on dark pill */
+  .page.folio-dark .folio { color: var(--paper-25); }
+  .page.folio-dark .folio > span { background: rgba(6, 68, 68, 0.55); }
+  .page.folio-dark .folio em { color: var(--gold-300); }
+  /* ═══════════════════════════════════════════════════
+     COVER — split layout: paper title block on top, full-bleed photo below
+     Reference register: Knight Frank country-houses / Strutt & Parker folios
+     ═══════════════════════════════════════════════════ */
+  .cover {
+    background: var(--paper-25);
+    color: var(--ink);
+    display: grid;
+    grid-template-rows: 86mm 1fr;
+  }
+  .cover-paper {
+    position: relative;
+    padding: 14mm 22mm 10mm;
+    display: flex; flex-direction: column;
+    align-items: center; justify-content: center;
+    text-align: center;
+  }
+  .cover-mast {
+    position: absolute;
+    top: 12mm; left: 0; right: 0;
+    display: flex; align-items: center; justify-content: center; gap: 14px;
+    font-family: var(--sans);
+    font-size: 9px; font-weight: 500;
+    letter-spacing: 0.42em; text-transform: uppercase;
+    color: var(--gold-700);
+  }
+  .cover-mast .pipe { width: 1px; height: 12px; background: var(--gold-700); opacity: 0.5; }
+  .cover-mast .brand { color: var(--gold-700); }
+  .cover-mast .label { color: var(--gold-700); opacity: 0.86; }
+  .cover-title-line {
+    display: flex; align-items: center; justify-content: center; gap: 28px;
+    margin-top: 6mm;
+    width: 100%;
+  }
+  .cover-title-line .flank {
+    flex: 1;
+    height: 1px;
+    background: var(--gold-500);
+    opacity: 0.55;
+    max-width: 70mm;
+  }
+  .cover-title {
+    font-family: var(--serif);
+    font-style: normal;
+    font-weight: 400;
+    font-size: 64px;
+    line-height: 1;
+    letter-spacing: 0.18em;
+    text-indent: 0.18em;  /* compensate for trailing letter-spacing */
+    text-transform: uppercase;
+    color: var(--ink);
+    white-space: nowrap;
+  }
+  .cover-subtitle {
+    margin-top: 16px;
+    font-family: var(--sans);
+    font-size: 11px; font-weight: 500;
+    letter-spacing: 0.42em; text-transform: uppercase;
+    color: var(--teal-700);
+  }
+  .cover-subtitle em {
+    font-style: normal;
+    color: var(--gold-700);
+    font-weight: 500;
+  }
+  .cover-image {
+    position: relative;
+    overflow: hidden;
+  }
+  .cover-image > img {
+    width: 100%; height: 100%;
+    object-fit: cover;
+    object-position: 50% 50%;
+  }
+  /* ═══════════════════════════════════════════════════
+     CONTENTS PAGE
+     ═══════════════════════════════════════════════════ */
+  .toc-page {
+    display: grid;
+    grid-template-columns: 1.1fr 1fr;
+    height: 100%;
+  }
+  .toc-image {
+    position: relative;
+    overflow: hidden;
+  }
+  .toc-image img { width: 100%; height: 100%; object-fit: cover; }
+  .toc-image::after {
+    content: '';
+    position: absolute; inset: 0;
+    background: linear-gradient(180deg, transparent 60%, rgba(14,20,24,0.18) 100%);
+  }
+  .toc-image .caption {
+    position: absolute; bottom: 12mm; left: 12mm; right: 12mm;
+    padding: 14px 18px 16px;
+    background: rgba(14,20,24,0.78);
+    border-left: 1px solid var(--gold-300);
+    font-family: var(--serif);
+    font-style: italic;
+    font-weight: 400;
+    font-size: 16px;
+    color: var(--paper-0);
+    letter-spacing: 0.01em;
+    line-height: 1.45;
+  }
+  .toc-image .caption::before { display: none; }
+  .toc-content {
+    padding: 18mm 16mm 16mm;
+    display: flex; flex-direction: column;
+    justify-content: space-between;
+  }
+  .toc-eyebrow {
+    font-family: var(--sans);
+    font-size: 10px; font-weight: 500;
+    letter-spacing: 0.42em; text-transform: uppercase;
+    color: var(--gold-700);
+  }
+  .toc-rule { width: 32px; height: 1px; background: var(--gold-500); margin: 7px 0 14px; }
+  .toc-title.compact {
+    font-size: 38px !important;
+    line-height: 0.95 !important;
+    margin-bottom: 16px !important;
+  }
+  .toc-title {
+    font-family: var(--serif);
+    font-weight: 400;
+    font-size: 56px;
+    line-height: 1;
+    color: var(--teal-900);
+    letter-spacing: -0.01em;
+    margin-bottom: 24px;
+  }
+  .toc-title em { font-style: italic; color: var(--gold-700); }
+  .toc-list {
+    list-style: none;
+    border-top: 1px solid var(--rule);
+  }
+  .toc-list li {
+    display: grid;
+    grid-template-columns: 26px 1fr 34px;
+    align-items: baseline;
+    column-gap: 12px;
+    padding: 6.5px 0;
+    border-bottom: 1px solid var(--rule);
+  }
+  .toc-num {
+    font-family: var(--serif);
+    font-style: italic;
+    font-size: 13px;
+    color: var(--gold-700);
+  }
+  .toc-name {
+    font-family: var(--serif);
+    font-size: 15.5px;
+    font-weight: 400;
+    color: var(--teal-900);
+    letter-spacing: 0.005em;
+    line-height: 1.25;
+  }
+  .toc-name span {
+    font-family: var(--sans);
+    font-size: 8.5px; font-weight: 400;
+    letter-spacing: 0.18em; text-transform: uppercase;
+    color: var(--slate-600);
+    display: block;
+    margin-top: 2px;
+  }
+  .toc-page-num {
+    font-family: var(--sans);
+    font-size: 10px; font-weight: 500;
+    letter-spacing: 0.2em;
+    color: var(--gold-700);
+    text-align: right;
+  }
+  .toc-credit {
+    margin-top: auto;
+    font-family: var(--body-serif);
+    font-style: italic;
+    font-size: 11px;
+    color: var(--slate-600);
+    line-height: 1.55;
+  }
+  .toc-credit strong { font-style: normal; color: var(--teal-900); font-weight: 600; }
+  .toc-credit .brand-mark {
+    display: block;
+    font-family: var(--sans);
+    font-style: normal;
+    font-size: 10px; font-weight: 500;
+    letter-spacing: 0.32em; text-transform: uppercase;
+    color: var(--gold-700);
+    margin-bottom: 10px;
+  }
+  /* ═══════════════════════════════════════════════════
+     SHARED EDITORIAL STYLES
+     ═══════════════════════════════════════════════════ */
+  .ed-eyebrow {
+    font-family: var(--sans);
+    font-size: 9.5px; font-weight: 500;
+    letter-spacing: 0.42em; text-transform: uppercase;
+    color: var(--gold-700);
+    margin-bottom: 8px;
+  }
+  .ed-rule { width: 32px; height: 1px; background: var(--gold-500); margin: 8px 0 14px; }
+  .ed-headline {
+    font-family: var(--serif);
+    font-weight: 400;
+    font-size: 50px;
+    line-height: 0.98;
+    letter-spacing: -0.012em;
+    color: var(--teal-900);
+  }
+  .ed-headline em { font-style: italic; font-weight: 400; color: var(--gold-700); }
+  .ed-headline.smaller { font-size: 38px; }
+  .ed-deck {
+    font-family: var(--serif);
+    font-style: italic;
+    font-weight: 400;
+    font-size: 17px;
+    line-height: 1.42;
+    color: var(--teal-700);
+    margin-top: 16px;
+    letter-spacing: 0.005em;
+  }
+  .ed-body {
+    font-family: var(--body-serif);
+    font-size: 10.5px; font-weight: 400;
+    line-height: 1.62;
+    color: #1a2026;
+    text-align: left;
+    hyphens: none;
+    letter-spacing: 0.005em;
+  }
+  .ed-body + .ed-body { margin-top: 9px; }
+  .ed-body strong { color: var(--teal-900); font-weight: 600; }
+  .ed-body em { color: var(--gold-700); font-style: italic; }
+  .ed-body.dropcap::first-letter {
+    font-family: var(--serif);
+    font-style: italic;
+    font-weight: 400;
+    font-size: 68px;
+    line-height: 0.85;
+    float: left;
+    color: var(--gold-700);
+    padding: 6px 10px 0 0;
+    margin-top: 4px;
+  }
+  .ed-caption {
+    font-family: var(--serif);
+    font-style: italic;
+    font-size: 11px;
+    color: var(--slate-600);
+    line-height: 1.5;
+    letter-spacing: 0.01em;
+    margin-top: 6px;
+  }
+  .ed-caption strong { font-style: normal; color: var(--teal-900); font-weight: 500; }
+  .ed-pullquote {
+    font-family: var(--serif);
+    font-style: italic;
+    font-weight: 400;
+    font-size: 26px;
+    line-height: 1.22;
+    color: var(--teal-900);
+    letter-spacing: -0.005em;
+    padding: 12px 0 14px;
+    border-top: 1px solid var(--rule);
+    border-bottom: 1px solid var(--rule);
+  }
+  .ed-pullquote::before {
+    content: '“';
+    display: block;
+    font-size: 50px;
+    line-height: 0.6;
+    color: var(--gold-500);
+    margin-bottom: 8px;
+  }
+  .ed-pullquote .attrib {
+    display: block;
+    font-family: var(--sans);
+    font-style: normal;
+    font-size: 9px; font-weight: 500;
+    letter-spacing: 0.32em; text-transform: uppercase;
+    color: var(--slate-600);
+    margin-top: 12px;
+  }
+  .ed-stat {
+    border-top: 1px solid var(--rule);
+    padding-top: 8px;
+  }
+  .ed-stat .v {
+    font-family: var(--serif);
+    font-size: 36px; font-weight: 400;
+    line-height: 1;
+    color: var(--teal-900);
+    letter-spacing: -0.01em;
+  }
+  .ed-stat .v em { font-style: italic; color: var(--gold-700); }
+  .ed-stat .l {
+    font-family: var(--sans);
+    font-size: 8.5px; font-weight: 400;
+    letter-spacing: 0.28em; text-transform: uppercase;
+    color: var(--slate-600);
+    margin-top: 8px;
+  }
+  /* ═══════════════════════════════════════════════════
+     SPREAD 01 — OPENER (Pont Street-style two-page editorial)
+     Big serif title left, hero photo right
+     ═══════════════════════════════════════════════════ */
+  .opener {
+    display: grid;
+    grid-template-columns: 1fr 1.35fr;
+    height: 100%;
+  }
+  .opener-text {
+    padding: 18mm 14mm 14mm 18mm;
+    display: flex; flex-direction: column;
+  }
+  .opener-spec {
+    margin-top: 10px;
+    font-family: var(--serif);
+    font-style: italic;
+    font-size: 16px;
+    color: var(--gold-700);
+    letter-spacing: 0.01em;
+  }
+  .opener-spec strong { font-style: normal; font-weight: 500; color: var(--teal-900); }
+  .opener-title {
+    font-family: var(--serif);
+    font-style: italic;
+    font-weight: 400;
+    font-size: 72px;
+    line-height: 0.96;
+    letter-spacing: -0.016em;
+    color: var(--teal-900);
+    margin: 14px 0 0;
+  }
+  .opener-title em {
+    display: block;
+    font-style: italic;
+    font-weight: 400;
+    color: var(--gold-700);
+    font-size: 0.36em;
+    line-height: 1.2;
+    margin-top: 8px;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    font-family: var(--sans);
+  }
+  .opener-meta-row {
+    display: flex; flex-wrap: nowrap; gap: 14px;
+    margin: 18px 0 16px;
+    padding: 12px 0;
+    border-top: 1px solid var(--rule);
+    border-bottom: 1px solid var(--rule);
+    font-variant-numeric: tabular-nums;
+  }
+  .opener-meta-row .item {
+    flex: 0 1 auto;
+    min-width: 0;
+    white-space: nowrap;
+    font-family: var(--serif);
+  }
+  .opener-meta-row .item .k {
+    font-family: var(--sans);
+    font-size: 8.5px; font-weight: 500;
+    letter-spacing: 0.22em; text-transform: uppercase;
+    color: var(--slate-600);
+    display: block; margin-bottom: 4px;
+    white-space: nowrap;
+  }
+  .opener-meta-row .item .v {
+    font-family: var(--serif);
+    font-size: 17px; font-weight: 400;
+    color: var(--teal-900);
+    letter-spacing: 0;
+    white-space: nowrap;
+  }
+  .opener-meta-row .item .v em { font-style: italic; color: var(--gold-700); white-space: nowrap; }
+  .opener-body { margin-top: auto; }
+  .opener-body .ed-body { font-size: 10.5px; line-height: 1.58; }
+  .opener-image {
+    position: relative;
+    overflow: hidden;
+  }
+  .opener-image img { width: 100%; height: 100%; object-fit: cover; }
+  .opener-image::after {
+    content: '';
+    position: absolute; inset: 0;
+    background: linear-gradient(180deg, transparent 60%, rgba(14,20,24,0.18) 100%);
+  }
+  .opener-image .img-caption {
+    position: absolute;
+    bottom: 12mm; right: 12mm;
+    padding: 12px 16px 14px;
+    background: rgba(14,20,24,0.78);
+    border-right: 1px solid var(--gold-300);
+    font-family: var(--serif);
+    font-style: italic;
+    font-weight: 400;
+    font-size: 14px;
+    color: var(--paper-0);
+    text-align: right;
+    line-height: 1.5;
+    max-width: 320px;
+  }
+  .opener-image .img-caption::before { display: none; }
+  /* ═══════════════════════════════════════════════════
+     SPREAD 02 — STORY: ground floor / living
+     Mosaic with narrative column
+     ═══════════════════════════════════════════════════ */
+  .spread {
+    padding: 14mm 14mm 16mm;
+    height: 100%;
+    display: grid;
+    gap: 10px;
+  }
+  .spread-2 {
+    grid-template-columns: 1.1fr 1fr 1.1fr;
+    grid-template-rows: 1fr 56mm;
+    min-height: 0;
+  }
+  .spread-2 .hero-img {
+    grid-column: 1 / 3;
+    grid-row: 1;
+    overflow: hidden;
+    position: relative;
+    min-height: 0;
+  }
+  .spread-2 .hero-img img { width: 100%; height: 100%; object-fit: cover; }
+  .spread-2 .text-col {
+    grid-column: 3;
+    grid-row: 1;
+    padding: 2mm 0 0 4mm;
+    display: flex; flex-direction: column;
+    min-height: 0;
+    overflow: hidden;
+  }
+  .spread-2 .strip {
+    grid-column: 1 / 4;
+    grid-row: 2;
+    margin-top: 2mm;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 14px;
+  }
+  .spread-2 .strip-cell { display: flex; flex-direction: column; gap: 6px; }
+  .spread-2 .strip-cell img {
+    width: 100%; height: 42mm; object-fit: cover;
+  }
+  /* ═══════════════════════════════════════════════════
+     SPREAD 03 — RECEPTION ROOMS / HALL
+     Asymmetric: left big text, right offset photo column
+     ═══════════════════════════════════════════════════ */
+  .spread-3 {
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 60mm 1fr;
+    column-gap: 18px;
+    row-gap: 8px;
+    min-height: 0;
+  }
+  .spread-3 .head {
+    grid-column: 1 / 3;
+    grid-row: 1;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    column-gap: 22px;
+    align-items: end;
+    overflow: hidden;
+  }
+  .spread-3 .head .right { padding-left: 0; }
+  .spread-3 .left-img {
+    grid-column: 1;
+    grid-row: 2;
+    position: relative;
+    overflow: hidden;
+  }
+  .spread-3 .left-img img { width: 100%; height: 100%; object-fit: cover; }
+  .spread-3 .right-stack {
+    grid-column: 2;
+    grid-row: 2;
+    display: grid;
+    grid-template-rows: 1fr 1fr;
+    row-gap: 10px;
+    min-height: 0;
+  }
+  .spread-3 .right-stack .cell { position: relative; overflow: hidden; min-height: 0; }
+  .spread-3 .right-stack img { width: 100%; height: 100%; object-fit: cover; }
+  .spread-3 .right-stack img { width: 100%; height: 100%; object-fit: cover; }
+  /* ═══════════════════════════════════════════════════
+     SPREAD 04 — BEDROOMS GALLERY (Savills-style)
+     Tile grid + sidebar text
+     ═══════════════════════════════════════════════════ */
+  .spread-4 {
+    grid-template-columns: 1fr 2.1fr;
+    grid-template-rows: auto 1fr;
+    column-gap: 18px;
+    row-gap: 12px;
+  }
+  .spread-4 .text-side {
+    grid-column: 1;
+    grid-row: 1 / 3;
+    padding-right: 6mm;
+    display: flex; flex-direction: column;
+  }
+  .spread-4 .gallery {
+    grid-column: 2;
+    grid-row: 1 / 3;
+    display: grid;
+    grid-template-columns: 1.4fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    gap: 10px;
+  }
+  .spread-4 .gallery .cell { position: relative; overflow: hidden; }
+  .spread-4 .gallery .cell img { width: 100%; height: 100%; object-fit: cover; }
+  .spread-4 .gallery .cell.tall { grid-row: 1 / 3; }
+  /* ═══════════════════════════════════════════════════
+     SPREAD 05 — ANNEXE FEATURE: full-bleed photo + side panel
+     ═══════════════════════════════════════════════════ */
+  .feature-page {
+    display: grid;
+    grid-template-columns: 1.45fr 1fr;
+    height: 100%;
+  }
+  .feature-page .photo {
+    position: relative; overflow: hidden;
+  }
+  .feature-page .photo img { width: 100%; height: 100%; object-fit: cover; }
+  .feature-page .photo::after {
+    content: '';
+    position: absolute; inset: 0;
+    background: linear-gradient(180deg, transparent 60%, rgba(14,20,24,0.18) 100%);
+  }
+  .feature-page .photo .photo-caption {
+    position: absolute;
+    bottom: 12mm; left: 12mm; right: 12mm;
+    padding: 12px 16px 14px;
+    background: rgba(14,20,24,0.78);
+    border-left: 1px solid var(--gold-300);
+    font-family: var(--serif);
+    font-style: italic;
+    font-weight: 400;
+    font-size: 14px;
+    color: var(--paper-0);
+    line-height: 1.5;
+    max-width: 75%;
+  }
+  .feature-page .photo .photo-caption::before { display: none; }
+  .feature-page .panel {
+    background: var(--paper-100);
+    padding: 22mm 14mm 18mm 16mm;
+    display: flex; flex-direction: column;
+    position: relative;
+  }
+  .feature-page .panel::before {
+    content: '';
+    position: absolute;
+    top: 14mm; left: 16mm; right: 14mm;
+    height: 1px;
+    background: var(--gold-500);
+  }
+  /* Annexe attribute cards */
+  .attr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 14px; }
+  .attr {
+    border-top: 1px solid var(--rule);
+    padding: 8px 0 4px;
+  }
+  .attr .k {
+    font-family: var(--sans);
+    font-size: 8px; font-weight: 500;
+    letter-spacing: 0.28em; text-transform: uppercase;
+    color: var(--gold-700);
+    margin-bottom: 4px;
+  }
+  .attr .v {
+    font-family: var(--serif);
+    font-size: 14px;
+    color: var(--teal-900);
+    line-height: 1.3;
+    letter-spacing: 0.005em;
+  }
+  /* ═══════════════════════════════════════════════════
+     SPREAD 06 — GROUNDS & DEVELOPMENT
+     Big landscape image top, two-column text under
+     ═══════════════════════════════════════════════════ */
+  .spread-6 {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-rows: 1.1fr auto;
+    row-gap: 14px;
+    column-gap: 14px;
+  }
+  .spread-6 .top-image {
+    grid-column: 1 / 5;
+    grid-row: 1;
+    position: relative; overflow: hidden;
+  }
+  .spread-6 .top-image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
+  .spread-6 .top-image::after {
+    content: '';
+    position: absolute; inset: 0;
+    background: linear-gradient(180deg, rgba(14,20,24,0.32) 0%, rgba(14,20,24,0.10) 30%, rgba(14,20,24,0) 55%, rgba(14,20,24,0) 75%, rgba(14,20,24,0.45) 100%);
+  }
+  .spread-6 .top-image .overlay {
+    position: absolute;
+    top: 12mm; left: 12mm;
+    max-width: 60%;
+    padding: 14px 18px 16px;
+    background: rgba(14,20,24,0.78);
+    color: var(--paper-0);
+    border-left: 1px solid var(--gold-300);
+  }
+  .spread-6 .top-image .overlay .ed-eyebrow { color: var(--gold-300); margin-bottom: 6px; }
+  .spread-6 .top-image .overlay .ed-rule { background: var(--gold-300); margin: 6px 0 12px; }
+  .spread-6 .top-image .overlay .ed-headline { color: var(--paper-0); font-size: 38px; line-height: 1.0; }
+  .spread-6 .top-image .overlay .ed-headline em { color: var(--gold-300); }
+  .spread-6 .top-image .overlay .ed-eyebrow { color: var(--gold-300); }
+  .spread-6 .top-image .overlay .ed-rule { background: var(--gold-300); }
+  .spread-6 .top-image .overlay .ed-headline { color: var(--paper-0); font-size: 44px; }
+  .spread-6 .top-image .overlay .ed-headline em { color: var(--gold-300); }
+  .spread-6 .bottom { grid-row: 2; grid-column: span 1; }
+  .spread-6 .bottom h4 {
+    font-family: var(--serif);
+    font-size: 19px; font-weight: 500;
+    color: var(--teal-900);
+    margin-bottom: 6px;
+    letter-spacing: 0.005em;
+  }
+  .spread-6 .bottom h4 em { font-style: italic; font-weight: 400; color: var(--gold-700); }
+  .spread-6 .bottom .ed-body { font-size: 10px; }
+  /* ═══════════════════════════════════════════════════
+     SPREAD 07 — FLOORPLAN & SPECIFICATION
+     ═══════════════════════════════════════════════════ */
+  .spread-7 {
+    grid-template-columns: 1.4fr 1fr;
+    grid-template-rows: auto 1fr;
+    column-gap: 22px;
+    row-gap: 10px;
+  }
+  .spread-7 .header {
+    grid-column: 1 / 3;
+  }
+  .spread-7 .plan-area {
+    grid-column: 1;
+    grid-row: 2;
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+  }
+  .spread-7 .plan-area img {
+    max-width: 100%;
+    max-height: 130mm;
+    width: auto; height: auto;
+    object-fit: contain;
+  }
+  .spread-7 .plan-area .meta {
+    margin-top: 10px;
+    text-align: center;
+  }
+  .spread-7 .plan-area .meta .lead {
+    font-family: var(--serif);
+    font-size: 16px; font-weight: 400;
+    color: var(--teal-900);
+    letter-spacing: 0.005em;
+  }
+  .spread-7 .plan-area .meta .lead em { font-style: italic; color: var(--gold-700); }
+  .spread-7 .plan-area .meta .sub {
+    font-family: var(--sans);
+    font-size: 9px; font-weight: 300;
+    color: var(--slate-600);
+    letter-spacing: 0.16em; text-transform: uppercase;
+    margin-top: 4px;
+  }
+  .spec-side {
+    grid-column: 2;
+    grid-row: 2;
+    border-left: 1px solid var(--rule);
+    padding-left: 18px;
+    display: flex; flex-direction: column;
+  }
+  .spec-list {
+    list-style: none;
+    margin-top: 8px;
+  }
+  .spec-list li {
+    display: grid;
+    grid-template-columns: 24px 1fr;
+    column-gap: 12px;
+    padding: 7px 0;
+    border-bottom: 1px solid var(--rule-soft);
+    font-family: var(--sans);
+    font-size: 9.5px; font-weight: 300;
+    line-height: 1.5;
+    color: #2c3535;
+  }
+  .spec-list li:last-child { border-bottom: none; }
+  .spec-list li .num {
+    font-family: var(--serif);
+    font-style: italic;
+    font-size: 11px;
+    color: var(--gold-700);
+  }
+  .spec-list li strong { color: var(--teal-900); font-weight: 500; }
+  /* Location map — conditional. The slot lives between BROCHURE_MAP_SLOT_START / END
+     markers in the page-9 .spec-side block. property-extract screenshots whatever map
+     element the listing exposes (Google iframe, Mapbox/Leaflet div, static-map image,
+     etc.) — provider-agnostic — and saves the bytes as images/map.webp. When the slot
+     is non-null in property.json, the brochure agent leaves the block in place.
+     When the listing has no map, the agent deletes everything between the markers
+     (inclusive). Extract or omit — never synthesise. */
+  .location-map {
+    margin: 14px 0 0 0;
+    padding: 0;
+    border: 1px solid var(--rule);
+    background: var(--paper-100, #f6f1ea);
+    aspect-ratio: 16 / 10;
+    overflow: hidden;
+    position: relative;
+    display: flex; flex-direction: column;
+  }
+  .location-map img {
+    width: 100%; height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+  .location-map figcaption {
+    position: absolute;
+    left: 0; right: 0; bottom: 0;
+    padding: 4px 8px;
+    background: rgba(252, 251, 248, 0.92);
+    font-family: var(--serif);
+    font-style: italic;
+    font-size: 8.5px;
+    line-height: 1.4;
+    color: var(--ink);
+    letter-spacing: 0.005em;
+    text-align: right;
+    border-top: 1px solid var(--rule);
+  }
+  /* EPC bars */
+  .epc-block { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
+  .epc-title {
+    font-family: var(--serif);
+    font-size: 14px; font-weight: 500;
+    color: var(--teal-900);
+    margin-bottom: 8px;
+    letter-spacing: 0.005em;
+  }
+  .epc-title em { font-style: italic; color: var(--gold-700); }
+  .epc-bars { display: flex; gap: 2px; }
+  .epc-bar {
+    flex: 1;
+    height: 18px;
+    display: flex; align-items: center; justify-content: center;
+    font-family: var(--sans);
+    font-size: 9px; font-weight: 600;
+    color: white;
+  }
+  .epc-bar.a { background: #008054; }
+  .epc-bar.b { background: #19b459; }
+  .epc-bar.c { background: #8dce46; color: #1c2222; }
+  .epc-bar.d { background: #ffd500; color: #1c2222; }
+  .epc-bar.e { background: #fcaa65; color: #1c2222; }
+  .epc-bar.f { background: #ef8023; }
+  .epc-bar.g { background: #e9153b; }
+  .epc-bar.current {
+    outline: 2px solid var(--ink);
+    outline-offset: 2px;
+    z-index: 2;
+    position: relative;
+  }
+  /* ═══════════════════════════════════════════════════
+     SPREAD 08 — MATERIAL INFORMATION
+     Editorial directory style
+     ═══════════════════════════════════════════════════ */
+  .mi-page { padding: 18mm 14mm; height: 100%; display: flex; flex-direction: column; }
+  .mi-head { display: grid; grid-template-columns: 2fr 3fr; column-gap: 24px; align-items: end; margin-bottom: 14px; }
+  .mi-intro {
+    font-family: var(--serif);
+    font-style: italic;
+    font-size: 13px;
+    line-height: 1.55;
+    color: var(--teal-700);
+    border-left: 1px solid var(--gold-500);
+    padding-left: 14px;
+  }
+  .mi-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    column-gap: 24px;
+    row-gap: 18px;
+    margin-top: 6px;
+  }
+  .mi-section .mi-label {
+    font-family: var(--sans);
+    font-size: 9px; font-weight: 500;
+    letter-spacing: 0.36em; text-transform: uppercase;
+    color: var(--gold-700);
+    border-bottom: 1px solid var(--gold-500);
+    padding-bottom: 6px;
+    margin-bottom: 8px;
+  }
+  .mi-section .mi-row {
+    display: flex; justify-content: space-between; align-items: baseline;
+    padding: 6px 0;
+    border-bottom: 1px solid var(--rule-soft);
+    font-family: var(--sans);
+    font-size: 9.5px;
+    column-gap: 10px;
+  }
+  .mi-section .mi-row:last-child { border-bottom: none; }
+  .mi-section .mi-row .k {
+    color: var(--slate-600); font-weight: 300;
+  }
+  .mi-section .mi-row .v {
+    color: var(--teal-900); font-weight: 400;
+    text-align: right;
+    font-family: var(--serif);
+    font-size: 11.5px;
+    letter-spacing: 0.01em;
+  }
+  .mi-foot {
+    margin-top: auto;
+    padding-top: 14px;
+    border-top: 1px solid var(--rule);
+    font-family: var(--serif);
+    font-style: italic;
+    font-size: 11px;
+    color: var(--slate-600);
+    line-height: 1.55;
+  }
+  /* ═══════════════════════════════════════════════════
+     BACK PAGE
+     ═══════════════════════════════════════════════════ */
+  .backpage {
+    background: var(--teal-950);
+    color: var(--paper-25);
+  }
+  .backpage .bg { position: absolute; inset: 0; }
+  .backpage .bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.32; }
+  .backpage .bg::after {
+    content: '';
+    position: absolute; inset: 0;
+    background:
+      radial-gradient(ellipse 60% 60% at 50% 40%, rgba(201,176,122,0.12) 0%, transparent 70%),
+      linear-gradient(180deg, rgba(14,20,24,0.62) 0%, rgba(14,20,24,0.50) 50%, rgba(14,20,24,0.92) 100%);
+  }
+  .backpage-frame {
+    position: absolute;
+    top: 14mm; left: 14mm; right: 14mm; bottom: 14mm;
+    border: 1px solid rgba(229, 210, 168, 0.32);
+    z-index: 1;
+    pointer-events: none;
+  }
+  .backpage-inner {
+    position: relative; z-index: 2;
+    height: 100%;
+    padding: 22mm 28mm 18mm;
+    display: flex; flex-direction: column;
+    align-items: center; justify-content: center;
+    text-align: center;
+  }
+  .backpage-inner .back-mast { margin-bottom: 18px; }
+  .back-mast {
+    display: flex; align-items: center; justify-content: center; gap: 16px;
+    font-family: var(--sans);
+    font-size: 10px; font-weight: 400;
+    letter-spacing: 0.55em; text-transform: uppercase;
+    color: rgba(229, 210, 168, 0.82);
+    margin-bottom: 22px;
+  }
+  .back-mast img.back-mast-logo {
+    height: 36px; width: auto; display: block;
+    filter: drop-shadow(0 2px 12px rgba(0,0,0,0.45));
+  }
+  .back-mast .pipe { width: 1px; height: 18px; background: rgba(229, 210, 168, 0.55); }
+  .back-mast .brand { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.42em; text-transform: uppercase; color: rgba(229, 210, 168, 0.95); }
+  .back-mast .label { letter-spacing: 0.45em; text-transform: uppercase; color: rgba(229, 210, 168, 0.88); }
+  /* QR strip on the back page */
+  .back-qr-strip {
+    display: flex; gap: 28px; justify-content: center; align-items: flex-start;
+    margin-top: 22px;
+  }
+  .back-qr-strip a.qr {
+    display: flex; flex-direction: column; align-items: center; gap: 6px;
+    text-decoration: none;
+    color: inherit;
+    transition: opacity 200ms ease;
+  }
+  .back-qr-strip a.qr:hover { opacity: 0.85; }
+  .back-qr-strip .qr img {
+    width: 72px; height: 72px;
+    background: var(--paper-0);
+    padding: 6px;
+    border: 1px solid rgba(229, 210, 168, 0.32);
+  }
+  .back-qr-strip .qr-label {
+    font-family: var(--sans);
+    font-size: 8px; font-weight: 500;
+    letter-spacing: 0.28em; text-transform: uppercase;
+    color: rgba(229, 210, 168, 0.78);
+    text-align: center;
+  }
+  .back-qr-strip .qr-label em { font-style: italic; color: var(--gold-300); text-transform: none; letter-spacing: 0.04em; font-family: var(--body-serif); font-size: 11px; font-weight: 400; display: block; margin-top: 3px; }
+  .back-qr-strip .qr-link {
+    font-family: var(--sans);
+    font-size: 9px; font-weight: 400;
+    letter-spacing: 0.04em; text-transform: none;
+    color: var(--gold-300);
+    text-align: center;
+    text-decoration: underline;
+    text-decoration-color: rgba(201, 176, 122, 0.45);
+    text-underline-offset: 3px;
+    margin-top: 4px;
+    font-variant-numeric: tabular-nums;
+  }
+  .back-contact-grid .cell .name .dot { color: rgba(229,210,168,0.6); font-style: normal; }
+  .back-headline {
+    font-family: var(--serif);
+    font-style: italic;
+    font-weight: 400;
+    font-size: 60px;
+    line-height: 1.04;
+    letter-spacing: -0.012em;
+    color: var(--paper-0);
+    margin-bottom: 12px;
+  }
+  .back-headline em { font-style: italic; color: var(--gold-300); }
+  .back-tagline {
+    font-family: var(--serif);
+    font-style: italic;
+    font-size: 17px;
+    color: rgba(252,251,248,0.82);
+    line-height: 1.5;
+    max-width: 540px;
+    margin: 0 auto 28px;
+  }
+  .back-rule {
+    width: 56px; height: 1px;
+    background: var(--gold-500);
+    margin: 0 auto 20px;
+  }
+  .back-contact-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 36px;
+    max-width: 540px;
+    margin: 0 auto;
+    text-align: left;
+  }
+  .back-contact-grid .cell .k {
+    font-family: var(--sans);
+    font-size: 9px; font-weight: 500;
+    letter-spacing: 0.32em; text-transform: uppercase;
+    color: rgba(229, 210, 168, 0.7);
+    margin-bottom: 8px;
+    border-bottom: 1px solid rgba(229,210,168,0.25);
+    padding-bottom: 6px;
+  }
+  .back-contact-grid .cell .name {
+    font-family: var(--serif);
+    font-size: 19px;
+    color: var(--paper-0);
+    margin-bottom: 6px;
+    letter-spacing: 0.005em;
+  }
+  .back-contact-grid .cell .name em { font-style: italic; color: var(--gold-300); }
+  .back-contact-grid .cell .line {
+    font-family: var(--sans);
+    font-size: 11px; font-weight: 300;
+    color: rgba(252,251,248,0.85);
+    line-height: 1.7;
+  }
+  .back-foot {
+    position: absolute;
+    bottom: 28mm; left: 28mm; right: 28mm;
+    z-index: 2;
+    display: flex; justify-content: space-between; align-items: flex-end;
+  }
+  .back-foot .left, .back-foot .right {
+    font-family: var(--sans);
+    font-size: 9px; font-weight: 400;
+    letter-spacing: 0.28em; text-transform: uppercase;
+    color: rgba(252,251,248,0.55);
+  }
+  .back-foot .right { text-align: right; }
+  .back-foot em { font-style: normal; color: var(--gold-300); }
+  .back-disclaimer {
+    position: absolute;
+    bottom: 16mm; left: 28mm; right: 28mm;
+    z-index: 2;
+    font-family: var(--serif);
+    font-style: italic;
+    font-size: 9px;
+    line-height: 1.55;
+    color: rgba(252,251,248,0.45);
+    text-align: center;
+  }
+  /* ═══════════════════════════════════════════════════
+     INTERMISSION / FULL-BLEED IMAGE PAGES
+     Used between chapters; image is the page, with one
+     small caption pill anchored bottom-left. The folio
+     is the only other element. Lets the photography
+     breathe between editorial spreads.
+     ═══════════════════════════════════════════════════ */
+  .page.intermission { padding: 0; background: var(--ink); }
+  .full-bleed { position: relative; width: 100%; height: 100%; overflow: hidden; }
+  .full-bleed > img { width: 100%; height: 100%; object-fit: cover; display: block; }
+  .full-bleed::after {
+    content: '';
+    position: absolute; inset: 0;
+    background: linear-gradient(180deg, transparent 50%, rgba(14,20,24,0.45) 100%);
+    pointer-events: none;
+  }
+  .caption-pill {
+    position: absolute;
+    left: 14mm; bottom: 14mm;
+    max-width: 60%;
+    padding: 12px 16px 14px;
+    background: rgba(14,20,24,0.72);
+    color: var(--paper-0);
+    border-left: 1px solid var(--gold-300);
+    z-index: 2;
+  }
+  .caption-pill .ed-eyebrow-light {
+    display: block;
+    font-family: var(--sans);
+    font-size: 9px; font-weight: 500;
+    letter-spacing: 0.36em; text-transform: uppercase;
+    color: var(--gold-300);
+    margin-bottom: 7px;
+  }
+  .caption-pill .caption-text {
+    display: block;
+    font-family: var(--body-serif);
+    font-size: 11.5px; font-weight: 400;
+    line-height: 1.55;
+    color: var(--paper-0);
+    letter-spacing: 0.005em;
+  }
+  .caption-pill .caption-text em { font-style: italic; color: var(--gold-300); font-weight: 500; }
+  /* ═══════════════════════════════════════════════════
+     IMAGE-LED GRID PAGE — additional internal coverage
+     ═══════════════════════════════════════════════════ */
+  .gallery-page {
+    display: grid;
+    grid-template-rows: 32mm 1fr;
+    grid-template-columns: 1fr;
+    height: 100%;
+    padding: 14mm 14mm 16mm;
+    gap: 10px;
+  }
+  .gallery-page .gallery-head { grid-row: 1; display: flex; flex-direction: column; justify-content: flex-end; }
+  .gallery-page .gallery-grid {
+    grid-row: 2;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    gap: 10px;
+    min-height: 0;
+  }
+  .gallery-page .gallery-cell { position: relative; overflow: hidden; min-height: 0; }
+  .gallery-page .gallery-cell.tall { grid-row: 1 / 3; }
+  .gallery-page .gallery-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
+  .gallery-page .gallery-cell figcaption {
+    position: absolute; left: 8px; right: 8px; bottom: 8px;
+    padding: 6px 10px;
+    background: rgba(14,20,24,0.72);
+    color: var(--paper-0);
+    font-family: var(--body-serif);
+    font-style: italic;
+    font-size: 9.5px; line-height: 1.4;
+    border-left: 1px solid var(--gold-300);
+  }
+  /* ═══════════════════════════════════════════════════
+     SITE PLAN PAGE — dedicated page for plot plan
+     ═══════════════════════════════════════════════════ */
+  .siteplan-page {
+    display: grid;
+    grid-template-rows: 32mm 1fr 18mm;
+    grid-template-columns: 1.4fr 1fr;
+    height: 100%;
+    padding: 14mm 14mm 16mm;
+    gap: 12px 22px;
+  }
+  .siteplan-page .head { grid-column: 1 / 3; grid-row: 1; }
+  .siteplan-page .plan-area {
+    grid-column: 1; grid-row: 2;
+    display: flex; align-items: center; justify-content: center;
+    background: var(--paper-50);
+    overflow: hidden;
+  }
+  .siteplan-page .plan-area img {
+    max-width: 100%; max-height: 100%;
+    width: auto; height: auto;
+    object-fit: contain;
+  }
+  .siteplan-page .text-side {
+    grid-column: 2; grid-row: 2;
+    border-left: 1px solid var(--rule);
+    padding-left: 18px;
+    display: flex; flex-direction: column;
+    gap: 12px;
+  }
+  .siteplan-page .text-side h4 {
+    font-family: var(--body-serif);
+    font-style: normal; font-weight: 500;
+    font-size: 13px;
+    color: var(--teal-900);
+    letter-spacing: 0.005em;
+  }
+  .siteplan-page .text-side h4 em { font-style: italic; color: var(--gold-700); font-weight: 500; }
+  /* Strengthened text-on-image scrim for the feature page (page 7),
+     per the user feedback that the body copy was hard to read against the photo */
+  .feature-page .panel { background: var(--paper-100); }
+  /* ═══════════════════════════════════════════════════
+     PRINT
+     ═══════════════════════════════════════════════════ */
+  .print-img {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    pointer-events: none;
+    z-index: -1;
+  }
+  @page { size: A4 landscape; margin: 0; }
+  @media print {
+    html, body { background: white; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+    .download-bar { display: none !important; }
+    .page { margin: 0; box-shadow: none; page-break-after: always; page-break-inside: avoid; overflow: hidden; }
+    .page:last-of-type { page-break-after: auto; }
+    /* PRIMARY PATH — when print-img snapshots exist, hide everything else and show only the snapshot.
+       The snapshot is a flat raster of the on-screen page (folio + all chrome baked in). */
+    .page:has(.print-img[src]:not([src=""])) > *:not(.print-img) { display: none !important; }
+    .print-img[src]:not([src=""]) {
+      position: absolute !important;
+      inset: 0 !important;
+      width: 100% !important;
+      height: 100% !important;
+      opacity: 1 !important;
+      object-fit: cover !important;
+      z-index: 9999 !important;
+    }
+    /* FALLBACK PATH — no snapshot present. Print the live DOM directly.
+       Force folio reliability: drop backdrop-filter (Chrome's PDF engine strips it, pill goes invisible),
+       lift z-index above any absolute imagery, and bring it 2mm inward of the printable edge. */
+    .folio { z-index: 100 !important; bottom: 6mm !important; }
+    .folio > span { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(252, 251, 248, 0.95) !important; }
+    .page.folio-dark .folio > span { background: rgba(6, 68, 68, 0.78) !important; }
+    .back-foot { z-index: 100 !important; }
+    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
+  }
+</style>
+</head>
+<body>
+<div class="download-bar">
+  <button class="download-btn" onclick="window.print()">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+      <polyline points="7 10 12 15 17 10"/>
+      <line x1="12" y1="15" x2="12" y2="3"/>
+    </svg>
+    Download PDF
+  </button>
+</div>
+<!-- ════════════════════════════════════════════════════
+     COVER
+     ════════════════════════════════════════════════════ -->
+<section class="page cover" data-screen-label="01 Cover">
+  <img class="print-img" src="cover-print.png" alt="">
+  <div class="cover-paper">
+    <div class="cover-title-line">
+      <span class="flank"></span>
+      <!-- REPLACE {{ property_name }}: the property's distinct house name
+           (e.g. "Sparrows Farm", "Agincourt House") OR — if the property has
+           no separate name — the street as a tracked-caps proper noun
+           (e.g. "12 Henham Road"). All-caps display via CSS; the source
+           should be Title Case. Capped at ~28 characters to fit between
+           the gold flank rules. See placeholders.md for the picking rule. -->
+      <h1 class="cover-title">{{ property_name }}</h1>
+      <span class="flank"></span>
+    </div>
+    <!-- REPLACE {{ address_subtitle }}: the postal address as four parts
+         joined by " <em>·</em> " — typically "<street> · <locality> ·
+         <county> · <postcode>". For a property without a separate house
+         name the cover-title carries the street already; then the subtitle
+         drops "<street>" and starts at "<locality>". Use a non-breaking
+         space in the postcode (`NP7&nbsp;9TS`). Single line; will not wrap. -->
+    <div class="cover-subtitle">{{ address_subtitle }}</div>
+  </div>
+  <div class="cover-image">
+    <!-- REPLACE {{ cover_hero_src }} / {{ cover_hero_alt }}: the strongest
+         landscape exterior shot. By the images.md slot map this is
+         {{ property_slug }}-01.webp (cover hero index). Alt text: property
+         name + the moment captured (e.g. "...at golden hour", "...framed by
+         the village green"). -->
+    <img src="images/{{ cover_hero_src }}" alt="{{ cover_hero_alt }}">
+  </div>
+</section>
+<!-- ════════════════════════════════════════════════════
+     CONTENTS — page 2
+     ════════════════════════════════════════════════════ -->
+<section class="page" data-screen-label="02 Contents">
+  <img class="print-img" src="page2-print.png" alt="">
+  <div class="toc-page">
+    <div class="toc-image">
+      <!-- REPLACE {{ toc_hero_src }} / {{ toc_hero_alt }}: an interior shot
+           establishing character — typically the principal reception or the
+           open-plan kitchen-dining. Slot index per images.md is normally
+           {{ property_slug }}-07. Alt text: short factual description. -->
+      <img src="images/{{ toc_hero_src }}" alt="{{ toc_hero_alt }}">
+      <!-- REPLACE {{ toc_caption }}: ONE editorial sentence — the property's
+           elevator pitch. 15-30 words. Italic register. Often distilled from
+           seller brief Q5 ("the feeling on entry") + Q19 ("three words"). -->
+      <div class="caption">{{ toc_caption }}</div>
+    </div>
+    <div class="toc-content">
+      <div>
+        <div class="toc-rule"></div>
+        <h2 class="toc-title">Contents <em>&amp; itinerary</em></h2>
+        <!-- REPLACE {{ toc_chapter_N_title }} / {{ toc_chapter_N_sub }} /
+             {{ toc_chapter_N_page }}: chapter titles, sub-lines and page
+             numbers for chapters i–viii. The canonical eight-chapter arc
+             is documented in references/structure.md (Of place & pedigree →
+             A home at ease → Hall, hearth & sun → Bedrooms & baths →
+             [feature page] → Garden & ground → Plan & particulars →
+             Material information). Adapt the chapter titles to the property
+             (e.g. "Pool, outdoor kitchen & summerhouse" becomes "Terrace
+             & outdoor kitchen" when the property has no pool). PAGE NUMBERS
+             MUST match the actual rendered pages (default: 03, 04, 06, 08,
+             10, 12, 14, 15 for the 16-page folio with intermissions). -->
+        <ul class="toc-list">
+          <li>
+            <span class="toc-num">i.</span>
+            <span class="toc-name">{{ toc_chapter_1_title }}<span>{{ toc_chapter_1_sub }}</span></span>
+            <span class="toc-page-num">{{ toc_chapter_1_page }}</span>
+          </li>
+          <li>
+            <span class="toc-num">ii.</span>
+            <span class="toc-name">{{ toc_chapter_2_title }}<span>{{ toc_chapter_2_sub }}</span></span>
+            <span class="toc-page-num">{{ toc_chapter_2_page }}</span>
+          </li>
+          <li>
+            <span class="toc-num">iii.</span>
+            <span class="toc-name">{{ toc_chapter_3_title }}<span>{{ toc_chapter_3_sub }}</span></span>
+            <span class="toc-page-num">{{ toc_chapter_3_page }}</span>
+          </li>
+          <li>
+            <span class="toc-num">iv.</span>
+            <span class="toc-name">{{ toc_chapter_4_title }}<span>{{ toc_chapter_4_sub }}</span></span>
+            <span class="toc-page-num">{{ toc_chapter_4_page }}</span>
+          </li>
+          <li>
+            <span class="toc-num">v.</span>
+            <span class="toc-name">{{ toc_chapter_5_title }}<span>{{ toc_chapter_5_sub }}</span></span>
+            <span class="toc-page-num">{{ toc_chapter_5_page }}</span>
+          </li>
+          <li>
+            <span class="toc-num">vi.</span>
+            <span class="toc-name">{{ toc_chapter_6_title }}<span>{{ toc_chapter_6_sub }}</span></span>
+            <span class="toc-page-num">{{ toc_chapter_6_page }}</span>
+          </li>
+          <li>
+            <span class="toc-num">vii.</span>
+            <span class="toc-name">{{ toc_chapter_7_title }}<span>{{ toc_chapter_7_sub }}</span></span>
+            <span class="toc-page-num">{{ toc_chapter_7_page }}</span>
+          </li>
+          <li>
+            <span class="toc-num">viii.</span>
+            <span class="toc-name">{{ toc_chapter_8_title }}<span>{{ toc_chapter_8_sub }}</span></span>
+            <span class="toc-page-num">{{ toc_chapter_8_page }}</span>
+          </li>
+        </ul>
+      </div>
+      <!-- REPLACE {{ toc_credit }}: agent attribution. Two short lines:
+           italic photo/floorplan note (boilerplate, see placeholders.md) then
+           a <strong>Marketed by {{ brand_name }}</strong>, {{ brand_town }},
+           {{ brand_county }}. line. -->
+      <div class="toc-credit">
+        Photographed in&#8209;situ. Floor plans drawn to indicative scale; areas in sq&nbsp;ft and m&sup2;.<br>
+        <strong>Marketed by {{ brand_name }}</strong>, {{ brand_town }}, {{ brand_county }}.
+      </div>
+    </div>
+  </div>
+  <!-- REPLACE {{ folio_strip }}: "{{ property_name }} · {{ locality }}" —
+       this exact pattern repeats on every interior page. The middle slot
+       changes per page ({{ folio_mid_NN }}); the right slot is the page
+       number (literal, matches the page index). -->
+  <div class="folio">
+    <span>{{ folio_strip }}</span>
+    <span class="folio-mid">— <em>Contents</em> —</span>
+    <span>02</span>
+  </div>
+</section>
+<!-- ════════════════════════════════════════════════════
+     OPENER — Spread 03 (Chapter I — Of place & pedigree)
+     ════════════════════════════════════════════════════ -->
+<section class="page" data-screen-label="03 Opener">
+  <img class="print-img" src="page3-print.png" alt="">
+  <div class="opener">
+    <div class="opener-text">
+      <!-- REPLACE {{ chapter1_eyebrow }}: "Chapter I · <chapter1 title>".
+           The chapter1 title is normally "Of place & pedigree" — adapt only
+           if the property's narrative arc differs (rare). -->
+      <div class="ed-eyebrow">{{ chapter1_eyebrow }}</div>
+      <div class="ed-rule"></div>
+      <!-- REPLACE {{ opener_title_main }} / {{ opener_title_sub }}: h2 with
+           the property name as the main glyph and locality+county as the
+           inline <em> sub-line. CSS renders the <em> as a smaller tracked-
+           caps label. -->
+      <h2 class="opener-title">{{ opener_title_main }}<em>{{ opener_title_sub }}</em></h2>
+      <!-- REPLACE {{ opener_spec_line }}: "<strong><street></strong> ·
+           <postcode> &nbsp;·&nbsp; <em>{{ price_line }}</em>" — keep the
+           strong/em formatting; use the exact price qualifier from
+           property.json (Offers Over / Guide Price / Asking Price). -->
+      <div class="opener-spec">{{ opener_spec_line }}</div>
+      <!-- REPLACE {{ opener_meta_N_label }} / {{ opener_meta_N_value }}:
+           five fixed slots — typically Bedrooms, Bathrooms, Receptions,
+           Internal (sq ft), Plot (acres). Numbers come from property.json.
+           If a slot is genuinely unknown (e.g. plot not surveyed, year
+           unknown), drop that <div class="item"> rather than inventing
+           a value — never synthesise. If the property has no acreage,
+           substitute "Type" / "Detached <em>YYYY</em>" or similar. The
+           row MUST NOT wrap — see copy.md "Stats rows". -->
+      <div class="opener-meta-row">
+        <div class="item">
+          <span class="k">{{ opener_meta_1_label }}</span>
+          <span class="v">{{ opener_meta_1_value }}</span>
+        </div>
+        <div class="item">
+          <span class="k">{{ opener_meta_2_label }}</span>
+          <span class="v">{{ opener_meta_2_value }}</span>
+        </div>
+        <div class="item">
+          <span class="k">{{ opener_meta_3_label }}</span>
+          <span class="v">{{ opener_meta_3_value }}</span>
+        </div>
+        <div class="item">
+          <span class="k">{{ opener_meta_4_label }}</span>
+          <span class="v">{{ opener_meta_4_value }}</span>
+        </div>
+        <div class="item">
+          <span class="k">{{ opener_meta_5_label }}</span>
+          <span class="v">{{ opener_meta_5_value }}</span>
+        </div>
+      </div>
+      <!-- REPLACE {{ opener_para_1 }} / {{ opener_para_2 }}: two editorial
+           paragraphs introducing the home. Style guide in copy.md →
+           "Opener paragraphs (page 3)".
+           - Para 1 carries the dropcap. 4–6 sentences. Set place + age +
+             tenure context. Distil from seller brief Q1 (why bought) +
+             Q3 (love most) + Q11 (the area).
+           - Para 2: pairs character + comfort or period + modern.
+             3–4 sentences. End on an italic phrase (single sentence
+             wrapped in <em>) — the brochure's "voice signature" closer.
+           Use <strong> sparingly for the two or three signature features.
+           Em-dashes MUST stay rare — see copy.md "Reduce em-dash usage". -->
+      <div class="opener-body">
+        <p class="ed-body dropcap">
+          {{ opener_para_1 }}
+        </p>
+        <p class="ed-body">
+          {{ opener_para_2 }}
+        </p>
+      </div>
+    </div>
+    <div class="opener-image">
+      <!-- REPLACE {{ opener_image_src }} / {{ opener_image_alt }} /
+           {{ opener_image_caption }}: the principal elevation OR a strong
+           aerial. Slot {{ property_slug }}-02 per images.md. Caption is a
+           single italic sentence below the image. -->
+      <img src="images/{{ opener_image_src }}" alt="{{ opener_image_alt }}">
+      <div class="img-caption">{{ opener_image_caption }}</div>
+    </div>
+  </div>
+  <div class="folio">
+    <span>{{ folio_strip }}</span>
+    <span class="folio-mid">— <em>{{ folio_mid_03 }}</em> —</span>
+    <span>03</span>
+  </div>
+</section>
+<!-- ════════════════════════════════════════════════════
+     SPREAD 04 — Chapter II — A home at ease
+     ════════════════════════════════════════════════════ -->
+<section class="page" data-screen-label="04 House at ease">
+  <img class="print-img" src="page4-print.png" alt="">
+  <div class="spread spread-2">
+    <div class="hero-img">
+      <!-- REPLACE {{ chapter2_hero_src }} / {{ chapter2_hero_alt }}: the
+           wide open-plan reception or kitchen-dining hero. Slot 04 or 07. -->
+      <img src="images/{{ chapter2_hero_src }}" alt="{{ chapter2_hero_alt }}">
+    </div>
+    <div class="text-col">
+      <!-- REPLACE {{ chapter2_eyebrow }}: "Chapter II" (Roman numeral). -->
+      <div class="ed-eyebrow">{{ chapter2_eyebrow }}</div>
+      <div class="ed-rule"></div>
+      <!-- REPLACE {{ chapter2_heading }}: h3 with property's headline word(s)
+           — "A home at ease", "A home built around the table", etc.
+           Italic glyph at the end via <em>...</em>. Avoid "house" — use
+           "home" per copy.md "Home vs house". -->
+      <h3 class="ed-headline smaller">{{ chapter2_heading }}</h3>
+      <!-- REPLACE {{ chapter2_deck }}: single italic sentence summarising
+           the chapter — 12-25 words. Sourced from seller brief Q5
+           (feeling on entry) + Q7 (lifestyle). -->
+      <p class="ed-deck">{{ chapter2_deck }}</p>
+      <!-- REPLACE {{ chapter2_para_1 }} / {{ chapter2_para_2 }}: two body
+           paragraphs walking the reader through the ground-floor flow.
+           - Para 1: from entrance through reception(s) to the central
+             living space (kitchen-dining-living). 4–6 sentences.
+           - Para 2: kitchen specifics (cabinetry, worksurfaces, appliances)
+             and how the rooms connect to utility + outdoor. 3–5 sentences.
+             Close with an italic phrase if the seller's brief offers one. -->
+      <p class="ed-body" style="margin-top: 10px;">
+        {{ chapter2_para_1 }}
+      </p>
+      <p class="ed-body">
+        {{ chapter2_para_2 }}
+      </p>
+    </div>
+    <!-- REPLACE {{ chapter2_strip_N_src }} / {{ chapter2_strip_N_alt }} /
+         {{ chapter2_strip_N_caption_label }} / {{ chapter2_strip_N_caption_text }}:
+         three strip cells along the bottom. Each cell has a bold lead-in
+         (e.g. "The kitchen.") then a one-sentence descriptive caption.
+         Pick distinct moments — not three angles of the same room. -->
+    <div class="strip">
+      <div class="strip-cell">
+        <img src="images/{{ chapter2_strip_1_src }}" alt="{{ chapter2_strip_1_alt }}">
+        <div class="ed-caption"><strong>{{ chapter2_strip_1_caption_label }}</strong> {{ chapter2_strip_1_caption_text }}</div>
+      </div>
+      <div class="strip-cell">
+        <img src="images/{{ chapter2_strip_2_src }}" alt="{{ chapter2_strip_2_alt }}">
+        <div class="ed-caption"><strong>{{ chapter2_strip_2_caption_label }}</strong> {{ chapter2_strip_2_caption_text }}</div>
+      </div>
+      <div class="strip-cell">
+        <img src="images/{{ chapter2_strip_3_src }}" alt="{{ chapter2_strip_3_alt }}">
+        <div class="ed-caption"><strong>{{ chapter2_strip_3_caption_label }}</strong> {{ chapter2_strip_3_caption_text }}</div>
+      </div>
+    </div>
+  </div>
+  <div class="folio">
+    <span>{{ folio_strip }}</span>
+    <span class="folio-mid">— <em>{{ folio_mid_04 }}</em> —</span>
+    <span>04</span>
+  </div>
+</section>
+<!-- ════════════════════════════════════════════════════
+     PAGE 5 — INTERMISSION (after Chapter II — visual breath)
+     ════════════════════════════════════════════════════ -->
+<section class="page intermission" data-screen-label="05 Intermission interior">
+  <img class="print-img" src="page5-print.png" alt="">
+  <div class="full-bleed">
+    <!-- REPLACE {{ intermission_05_src }} / {{ intermission_05_alt }}:
+         one full-bleed interior shot — a dining table moment, a hearth, an
+         orangery — that gives the eye a beat between chapters II and III.
+         Use a slot with strong negative space; avoid busy/cluttered images
+         because the caption pill sits on top of them. -->
+    <img src="images/{{ intermission_05_src }}" alt="{{ intermission_05_alt }}">
+    <div class="caption-pill">
+      <span class="ed-eyebrow-light">Continued, Chapter II</span>
+      <!-- REPLACE {{ intermission_05_caption }}: single italic sentence
+           anchoring the image. Start with "<em>The [room]</em>," — the
+           italic noun matches the visible feature. 10-20 words. -->
+      <span class="caption-text">{{ intermission_05_caption }}</span>
+    </div>
+  </div>
+  <div class="folio folio-dark">
+    <span>{{ folio_strip }}</span>
+    <span class="folio-mid">— <em>{{ folio_mid_04 }}</em> —</span>
+    <span>05</span>
+  </div>
+</section>
+<!-- ════════════════════════════════════════════════════
+     SPREAD 06 — Chapter III (e.g. "Hall, hearth & sun" / "Hearth & hall")
+     ════════════════════════════════════════════════════ -->
+<section class="page" data-screen-label="06 Chapter III">
+  <img class="print-img" src="page6-print.png" alt="">
+  <div class="spread spread-3">
+    <div class="head">
+      <div class="left">
+        <!-- REPLACE {{ chapter3_eyebrow }}: "Chapter III". -->
+        <div class="ed-eyebrow">{{ chapter3_eyebrow }}</div>
+        <div class="ed-rule"></div>
+        <!-- REPLACE {{ chapter3_heading }}: h3, two lines, italic glyph at
+             the end. Default arc names this chapter for the home's quieter
+             ground-floor moments — hearth, entry, sun-room, drawing room.
+             Adapt to the property's actual features ("Hearth & hall" /
+             "Hall, hearth & sun" / "Reception rooms"). -->
+        <h3 class="ed-headline">{{ chapter3_heading }}</h3>
+      </div>
+      <div class="right">
+        <!-- REPLACE {{ chapter3_deck }}: italic deck sentence. -->
+        <p class="ed-deck" style="margin-top: 0;">{{ chapter3_deck }}</p>
+        <!-- REPLACE {{ chapter3_para }}: ONE longer body paragraph (6–9
+             sentences) walking through the secondary reception rooms.
+             Lean on character features — beams, fireplaces, glazing,
+             flooring — and connect them to how the rooms are used. -->
+        <p class="ed-body" style="margin-top: 12px;">
+          {{ chapter3_para }}
+        </p>
+      </div>
+    </div>
+    <!-- REPLACE {{ chapter3_left_src }} / {{ chapter3_left_alt }}: the
+         largest single image of the chapter — typically the hearth or the
+         signature reception. -->
+    <div class="left-img">
+      <img src="images/{{ chapter3_left_src }}" alt="{{ chapter3_left_alt }}">
+    </div>
+    <!-- REPLACE {{ chapter3_stack_N_src }} / _alt: two stacked images on the
+         right. Use complementary rooms (e.g. hallway + drawing room, or
+         orangery + study). -->
+    <div class="right-stack">
+      <div class="cell">
+        <img src="images/{{ chapter3_stack_1_src }}" alt="{{ chapter3_stack_1_alt }}">
+      </div>
+      <div class="cell">
+        <img src="images/{{ chapter3_stack_2_src }}" alt="{{ chapter3_stack_2_alt }}">
+      </div>
+    </div>
+  </div>
+  <div class="folio">
+    <span>{{ folio_strip }}</span>
+    <span class="folio-mid">— <em>{{ folio_mid_06 }}</em> —</span>
+    <span>06</span>
+  </div>
+</section>
+<!-- ════════════════════════════════════════════════════
+     PAGE 7 — INTERMISSION (after Chapter III — visual breath)
+     ════════════════════════════════════════════════════ -->
+<section class="page intermission" data-screen-label="07 Intermission Chapter III">
+  <img class="print-img" src="page7-print.png" alt="">
+  <div class="full-bleed">
+    <!-- REPLACE {{ intermission_07_src }} / {{ intermission_07_alt }}: a
+         second full-bleed interior moment — the orangery, a sun-flooded
+         reception, the hearth from a wider angle. -->
+    <img src="images/{{ intermission_07_src }}" alt="{{ intermission_07_alt }}">
+    <div class="caption-pill">
+      <span class="ed-eyebrow-light">Continued, Chapter III</span>
+      <!-- REPLACE {{ intermission_07_caption }}: italic anchor sentence,
+           same style as page 5. -->
+      <span class="caption-text">{{ intermission_07_caption }}</span>
+    </div>
+  </div>
+  <div class="folio folio-dark">
+    <span>{{ folio_strip }}</span>
+    <span class="folio-mid">— <em>{{ folio_mid_06 }}</em> —</span>
+    <span>07</span>
+  </div>
+</section>
+<!-- ════════════════════════════════════════════════════
+     SPREAD 08 — Chapter IV — Bedrooms & baths
+     ════════════════════════════════════════════════════ -->
+<section class="page" data-screen-label="08 Bedrooms baths">
+  <img class="print-img" src="page8-print.png" alt="">
+  <div class="spread spread-4">
+    <div class="text-side">
+      <!-- REPLACE {{ chapter4_eyebrow }}: "Chapter IV". -->
+      <div class="ed-eyebrow">{{ chapter4_eyebrow }}</div>
+      <div class="ed-rule"></div>
+      <!-- REPLACE {{ chapter4_heading }}: "Bedrooms<br>&amp; <em>baths</em>"
+           or similar — keep <br> for two-line setting. -->
+      <h3 class="ed-headline smaller">{{ chapter4_heading }}</h3>
+      <!-- REPLACE {{ chapter4_deck }}: italic deck. Mention the count (X
+           bedrooms across Y floors) and the principal suite's signature. -->
+      <p class="ed-deck">{{ chapter4_deck }}</p>
+      <!-- REPLACE {{ chapter4_para_1 }}: 3–5 sentences walking the sleeping
+           floor — staircase, landing, second/third/fourth bedrooms in order.
+           Lean on light, beam, glazing. -->
+      <p class="ed-body" style="margin-top: 10px;">
+        {{ chapter4_para_1 }}
+      </p>
+      <!-- REPLACE three .ed-stat blocks. Each has a big number value (.v
+           with optional <em> unit) and an all-caps slate label (.l).
+           Typical content: bedroom count + character, bathroom count + en-
+           suite split, upper-floor sq ft (or first-floor / principal floor).
+           Drop the third stat if the property is small (apartment, terrace). -->
+      <div style="margin-top: 10px; display: grid; gap: 8px;">
+        <div class="ed-stat"><div class="v">{{ chapter4_stat_1_value }}</div><div class="l">{{ chapter4_stat_1_label }}</div></div>
+        <div class="ed-stat"><div class="v">{{ chapter4_stat_2_value }}</div><div class="l">{{ chapter4_stat_2_label }}</div></div>
+        <div class="ed-stat"><div class="v">{{ chapter4_stat_3_value }}</div><div class="l">{{ chapter4_stat_3_label }}</div></div>
+      </div>
+      <!-- REPLACE {{ chapter4_para_2 }}: 2–3 sentence closer on the
+           principal suite — dressing room, en-suite, view from the bed. -->
+      <p class="ed-body" style="margin-top: 10px;">
+        {{ chapter4_para_2 }}
+      </p>
+    </div>
+    <!-- REPLACE 5 gallery cells (1 tall feature + 4 standard). Mix bedrooms
+         and bathrooms so the gallery reads as the floor as a whole. The
+         tall cell is the principal-bedroom hero — verify pixel content
+         matches the principal room (NOT a guest bedroom). -->
+    <div class="gallery">
+      <div class="cell tall">
+        <img src="images/{{ chapter4_gallery_1_src }}" alt="{{ chapter4_gallery_1_alt }}">
+      </div>
+      <div class="cell">
+        <img src="images/{{ chapter4_gallery_2_src }}" alt="{{ chapter4_gallery_2_alt }}">
+      </div>
+      <div class="cell">
+        <img src="images/{{ chapter4_gallery_3_src }}" alt="{{ chapter4_gallery_3_alt }}">
+      </div>
+      <div class="cell">
+        <img src="images/{{ chapter4_gallery_4_src }}" alt="{{ chapter4_gallery_4_alt }}">
+      </div>
+      <div class="cell">
+        <img src="images/{{ chapter4_gallery_5_src }}" alt="{{ chapter4_gallery_5_alt }}">
+      </div>
+    </div>
+  </div>
+  <div class="folio">
+    <span>{{ folio_strip }}</span>
+    <span class="folio-mid">— <em>{{ folio_mid_08 }}</em> —</span>
+    <span>08</span>
+  </div>
+</section>
+<!-- ════════════════════════════════════════════════════
+     PAGE 9 — IMAGE-LED additional internal coverage ("Rooms in passing")
+     ════════════════════════════════════════════════════ -->
+<section class="page" data-screen-label="09 Image-led additional internal">
+  <img class="print-img" src="page9-print.png" alt="">
+  <div class="gallery-page">
+    <div class="gallery-head">
+      <!-- REPLACE {{ gallery_eyebrow }}: "Continued, Chapter II &amp; III"
+           or similar — links the gallery to the chapters whose imagery
+           it expands. -->
+      <div class="ed-eyebrow">{{ gallery_eyebrow }}</div>
+      <div class="ed-rule"></div>
+      <!-- REPLACE {{ gallery_heading }} / {{ gallery_deck }}: h3 + deck for
+           "Rooms in passing" — supplementary internal coverage. Keep
+           heading short (2–4 words italic close). -->
+      <h3 class="ed-headline smaller">{{ gallery_heading }}</h3>
+      <p class="ed-deck" style="margin-top: 8px;">{{ gallery_deck }}</p>
+    </div>
+    <!-- REPLACE five gallery cells, each with src/alt + a one-line italic
+         figcaption. The tall cell is the strongest single room. Captions
+         are SHORT — "<em>The living room.</em>" + (optional) trailing
+         clause. Don't repeat captions from the strip cells in Chapter II. -->
+    <div class="gallery-grid">
+      <div class="gallery-cell tall">
+        <img src="images/{{ gallery_1_src }}" alt="{{ gallery_1_alt }}">
+        <figcaption>{{ gallery_1_caption }}</figcaption>
+      </div>
+      <div class="gallery-cell">
+        <img src="images/{{ gallery_2_src }}" alt="{{ gallery_2_alt }}">
+        <figcaption>{{ gallery_2_caption }}</figcaption>
+      </div>
+      <div class="gallery-cell">
+        <img src="images/{{ gallery_3_src }}" alt="{{ gallery_3_alt }}">
+        <figcaption>{{ gallery_3_caption }}</figcaption>
+      </div>
+      <div class="gallery-cell">
+        <img src="images/{{ gallery_4_src }}" alt="{{ gallery_4_alt }}">
+        <figcaption>{{ gallery_4_caption }}</figcaption>
+      </div>
+      <div class="gallery-cell">
+        <img src="images/{{ gallery_5_src }}" alt="{{ gallery_5_alt }}">
+        <figcaption>{{ gallery_5_caption }}</figcaption>
+      </div>
+    </div>
+  </div>
+  <div class="folio">
+    <span>{{ folio_strip }}</span>
+    <span class="folio-mid">— <em>{{ folio_mid_09 }}</em> —</span>
+    <span>09</span>
+  </div>
+</section>
+<!-- ════════════════════════════════════════════════════
+     SPREAD 10 — Chapter V — Feature page (pool / outdoor kitchen /
+     summerhouse OR property-specific equivalent: terrace, annexe, studio,
+     pavilion, etc.). Repurpose the chapter title to the actual feature.
+     ════════════════════════════════════════════════════ -->
+<section class="page" data-screen-label="10 Feature page">
+  <img class="print-img" src="page10-print.png" alt="">
+  <div class="feature-page">
+    <div class="photo">
+      <!-- REPLACE {{ chapter5_photo_src }} / {{ chapter5_photo_alt }} /
+           {{ chapter5_photo_caption }}: the strongest single shot of the
+           feature, with a one-sentence caption beneath. -->
+      <img src="images/{{ chapter5_photo_src }}" alt="{{ chapter5_photo_alt }}">
+      <div class="photo-caption">{{ chapter5_photo_caption }}</div>
+    </div>
+    <div class="panel">
+      <!-- REPLACE {{ chapter5_eyebrow }}: "Chapter V · <feature title>" —
+           "Pool, outdoor kitchen & summerhouse", "Terrace & outdoor kitchen",
+           "The annexe & studio", etc. Match the TOC entry. -->
+      <div class="ed-eyebrow">{{ chapter5_eyebrow }}</div>
+      <div class="ed-rule"></div>
+      <!-- REPLACE {{ chapter5_heading }}: italic editorial headline summing
+           the feature's appeal. Two-line layout (use <br>). -->
+      <h3 class="ed-headline smaller">{{ chapter5_heading }}</h3>
+      <!-- REPLACE {{ chapter5_deck }}: italic deck — 18-30 words. -->
+      <p class="ed-deck" style="margin-top: 12px;">{{ chapter5_deck }}</p>
+      <!-- REPLACE {{ chapter5_para }}: ONE body paragraph (5–7 sentences)
+           walking the feature in detail. Name each sub-element exactly —
+           "outdoor kitchen" / "summerhouse" / "orangery" are NOT
+           interchangeable; see structure.md "Distinguishing features
+           clearly". -->
+      <p class="ed-body" style="margin-top: 12px;">
+        {{ chapter5_para }}
+      </p>
+      <!-- REPLACE four .attr blocks. Each has a small all-caps label (.k)
+           and a one-line value (.v). Pick four crisp facts — plot size,
+           a single distinctive feature, a count, a material. Drop a row
+           if the property has only three relevant facts. -->
+      <div class="attr-grid">
+        <div class="attr">
+          <div class="k">{{ chapter5_attr_1_label }}</div>
+          <div class="v">{{ chapter5_attr_1_value }}</div>
+        </div>
+        <div class="attr">
+          <div class="k">{{ chapter5_attr_2_label }}</div>
+          <div class="v">{{ chapter5_attr_2_value }}</div>
+        </div>
+        <div class="attr">
+          <div class="k">{{ chapter5_attr_3_label }}</div>
+          <div class="v">{{ chapter5_attr_3_value }}</div>
+        </div>
+        <div class="attr">
+          <div class="k">{{ chapter5_attr_4_label }}</div>
+          <div class="v">{{ chapter5_attr_4_value }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="folio">
+    <span>{{ folio_strip }}</span>
+    <span class="folio-mid">— <em>{{ folio_mid_10 }}</em> —</span>
+    <span>10</span>
+  </div>
+</section>
+<!-- ════════════════════════════════════════════════════
+     PAGE 11 — INTERMISSION (after Chapter V — outdoor full-bleed)
+     ════════════════════════════════════════════════════ -->
+<section class="page intermission" data-screen-label="11 Intermission outdoor">
+  <img class="print-img" src="page11-print.png" alt="">
+  <div class="full-bleed">
+    <!-- REPLACE {{ intermission_11_src }} / {{ intermission_11_alt }}: the
+         strongest single outdoor moment — pool at golden hour, terrace,
+         pergola, garden-from-distance. Drone shots work well here. -->
+    <img src="images/{{ intermission_11_src }}" alt="{{ intermission_11_alt }}">
+    <div class="caption-pill">
+      <span class="ed-eyebrow-light">Continued, Chapter V</span>
+      <!-- REPLACE {{ intermission_11_caption }}: italic anchor sentence. -->
+      <span class="caption-text">{{ intermission_11_caption }}</span>
+    </div>
+  </div>
+  <div class="folio folio-dark">
+    <span>{{ folio_strip }}</span>
+    <span class="folio-mid">— <em>{{ folio_mid_10 }}</em> —</span>
+    <span>11</span>
+  </div>
+</section>
+<!-- ════════════════════════════════════════════════════
+     SPREAD 12 — Chapter VI — Garden & ground
+     ════════════════════════════════════════════════════ -->
+<section class="page folio-dark" data-screen-label="12 Garden ground">
+  <img class="print-img" src="page12-print.png" alt="">
+  <div class="spread spread-6">
+    <div class="top-image">
+      <!-- REPLACE {{ chapter6_top_src }} / {{ chapter6_top_alt }}: the full
+           front elevation OR a wide aerial that frames the home in its
+           setting. The overlay sits on top — verify the image has a
+           contrast-quiet region for the overlay panel. -->
+      <img src="images/{{ chapter6_top_src }}" alt="{{ chapter6_top_alt }}">
+      <div class="overlay">
+        <!-- REPLACE {{ chapter6_eyebrow }} / {{ chapter6_heading }}:
+             "Chapter VI" and the chapter title. The heading reads as
+             "Garden,<br>drive <em>&amp; outlook</em>" or similar — adapt
+             to the property's actual ground-floor outdoor narrative. -->
+        <div class="ed-eyebrow">{{ chapter6_eyebrow }}</div>
+        <div class="ed-rule"></div>
+        <h3 class="ed-headline">{{ chapter6_heading }}</h3>
+      </div>
+    </div>
+    <!-- REPLACE four .bottom panels — each is a one-paragraph mini-section
+         with an italic h4 label and a 2–3 sentence body. Typical four:
+         rear garden, paddocks/plot, front/approach, ancillary
+         outbuildings. Re-title for the property. -->
+    <div class="bottom">
+      <h4>{{ chapter6_panel_1_heading }}</h4>
+      <p class="ed-body">{{ chapter6_panel_1_body }}</p>
+    </div>
+    <div class="bottom">
+      <h4>{{ chapter6_panel_2_heading }}</h4>
+      <p class="ed-body">{{ chapter6_panel_2_body }}</p>
+    </div>
+    <div class="bottom">
+      <h4>{{ chapter6_panel_3_heading }}</h4>
+      <p class="ed-body">{{ chapter6_panel_3_body }}</p>
+    </div>
+    <div class="bottom">
+      <h4>{{ chapter6_panel_4_heading }}</h4>
+      <p class="ed-body">{{ chapter6_panel_4_body }}</p>
+    </div>
+  </div>
+  <div class="folio">
+    <span>{{ folio_strip }}</span>
+    <span class="folio-mid">— <em>{{ folio_mid_12 }}</em> —</span>
+    <span>12</span>
+  </div>
+</section>
+<!-- ════════════════════════════════════════════════════
+     PAGE 13 — SITE PLAN (continued from Chapter VI)
+     ════════════════════════════════════════════════════ -->
+<section class="page" data-screen-label="13 Site plan">
+  <img class="print-img" src="page13-print.png" alt="">
+  <div class="siteplan-page">
+    <div class="head">
+      <!-- REPLACE {{ siteplan_eyebrow }}: "Continued, Chapter VI · The plot"
+           or similar. -->
+      <div class="ed-eyebrow">{{ siteplan_eyebrow }}</div>
+      <div class="ed-rule"></div>
+      <!-- REPLACE {{ siteplan_heading }}: the plot's headline fact —
+           "In excess of <em>2.20 acres</em>", "The <em>plot &amp; outlook</em>",
+           "Approximately <em>1.4 acres</em>". -->
+      <h3 class="ed-headline smaller">{{ siteplan_heading }}</h3>
+    </div>
+    <div class="plan-area">
+      <!-- REPLACE {{ siteplan_src }} / {{ siteplan_alt }}: the plot drawing
+           (trees, boundary, paddocks, outbuildings). Filename is normally
+           {{ property_slug }}-siteplan.png — line art, copied unchanged. -->
+      <img src="images/{{ siteplan_src }}" alt="{{ siteplan_alt }}">
+    </div>
+    <div class="text-side">
+      <!-- REPLACE three .text-side h4 + p pairs. Typical content: plot
+           description, boundary/screening, what sits within the grounds
+           (garden complex, paddocks, outbuildings). Then a small italic
+           ed-caption note about plan accuracy. -->
+      <h4>{{ siteplan_panel_1_heading }}</h4>
+      <p class="ed-body">{{ siteplan_panel_1_body }}</p>
+      <h4>{{ siteplan_panel_2_heading }}</h4>
+      <p class="ed-body">{{ siteplan_panel_2_body }}</p>
+      <h4>{{ siteplan_panel_3_heading }}</h4>
+      <p class="ed-body">{{ siteplan_panel_3_body }}</p>
+      <p class="ed-caption" style="margin-top: 4px;">Plan drawn to indicative scale; not to be relied on for legal purposes.</p>
+    </div>
+  </div>
+  <div class="folio">
+    <span>{{ folio_strip }}</span>
+    <span class="folio-mid">— <em>{{ folio_mid_13 }}</em> —</span>
+    <span>13</span>
+  </div>
+</section>
+<!-- ════════════════════════════════════════════════════
+     SPREAD 14 — Chapter VII — Plan & particulars
+     ════════════════════════════════════════════════════ -->
+<section class="page" data-screen-label="14 Plan particulars">
+  <img class="print-img" src="page14-print.png" alt="">
+  <div class="spread spread-7">
+    <div class="header">
+      <!-- REPLACE {{ chapter7_eyebrow }}: "Chapter VII · Plan &amp; particulars". -->
+      <div class="ed-eyebrow">{{ chapter7_eyebrow }}</div>
+      <div class="ed-rule"></div>
+      <!-- REPLACE {{ chapter7_heading }}: "All floors <em>at a glance</em>"
+           or similar. -->
+      <h3 class="ed-headline smaller">{{ chapter7_heading }}</h3>
+    </div>
+    <div class="plan-area">
+      <!-- REPLACE {{ floorplan_src }} / {{ floorplan_alt }}: the composite
+           floor plan, typically {{ property_slug }}-floorplan.png. PNG,
+           line art, copied unchanged from source (do NOT WebP-encode line
+           art; see images.md "Floor plan exception"). -->
+      <img src="images/{{ floorplan_src }}" alt="{{ floorplan_alt }}">
+      <div class="meta">
+        <!-- REPLACE {{ floorplan_lead }}: italic lead — "Total internal area
+             · <em>X sq ft</em> · Y m&sup2;". -->
+        <div class="lead">{{ floorplan_lead }}</div>
+        <!-- REPLACE {{ floorplan_sub }}: floor-by-floor breakdown — "Floor 1
+             · X sq ft &nbsp;·&nbsp; Floor 2 · Y sq ft" plus any ancillary
+             footprints (garage, outbuildings, plot). Excluded outbuildings
+             must be LISTED SEPARATELY — never silently rolled into the
+             principal home's sq ft; see structure.md "Floor area". -->
+        <div class="sub">{{ floorplan_sub }}</div>
+      </div>
+    </div>
+    <div class="spec-side">
+      <div class="ed-eyebrow" style="margin-bottom: 6px;">Particulars</div>
+      <!-- REPLACE 9 numbered particulars (.spec-list li × 9). Each is a
+           single short sentence highlighting one feature with <strong> on
+           the named element. Sequence: top-line architectural fact,
+           character feature, kitchen specifics, heating/services, signature
+           internal feature, signature outdoor feature, ancillary buildings,
+           plot, outlook. Adapt count to the property — fewer if smaller,
+           never more than 9 (the column overflows). -->
+      <ol class="spec-list">
+        <li><span class="num">i</span><span>{{ particular_1 }}</span></li>
+        <li><span class="num">ii</span><span>{{ particular_2 }}</span></li>
+        <li><span class="num">iii</span><span>{{ particular_3 }}</span></li>
+        <li><span class="num">iv</span><span>{{ particular_4 }}</span></li>
+        <li><span class="num">v</span><span>{{ particular_5 }}</span></li>
+        <li><span class="num">vi</span><span>{{ particular_6 }}</span></li>
+        <li><span class="num">vii</span><span>{{ particular_7 }}</span></li>
+        <li><span class="num">viii</span><span>{{ particular_8 }}</span></li>
+        <li><span class="num">ix</span><span>{{ particular_9 }}</span></li>
+      </ol>
+      <div class="epc-block">
+        <!-- REPLACE {{ epc_rating }}: the current band letter A–G. The CSS
+             class .current on the matching <div class="epc-bar X"> lights
+             that band; the others are dim. The exact pattern below shows
+             band C as the "current" — substitute by changing which row
+             carries `class="epc-bar X current"`. -->
+        <div class="epc-title">Energy &amp; environment <em>· EPC {{ epc_rating }}</em></div>
+        <div class="epc-bars">
+          <div class="epc-bar a{{ epc_current_a }}">A</div>
+          <div class="epc-bar b{{ epc_current_b }}">B</div>
+          <div class="epc-bar c{{ epc_current_c }}">C</div>
+          <div class="epc-bar d{{ epc_current_d }}">D</div>
+          <div class="epc-bar e{{ epc_current_e }}">E</div>
+          <div class="epc-bar f{{ epc_current_f }}">F</div>
+          <div class="epc-bar g{{ epc_current_g }}">G</div>
+        </div>
+        <!-- REPLACE {{ epc_caption }}: 1–2 sentences on the heating system
+             and what the EPC band reflects about the home's fabric. -->
+        <p class="ed-caption" style="margin-top: 8px;">
+          {{ epc_caption }}
+        </p>
+      </div>
+    </div>
+  </div>
+  <div class="folio">
+    <span>{{ folio_strip }}</span>
+    <span class="folio-mid">— <em>{{ folio_mid_14 }}</em> —</span>
+    <span>14</span>
+  </div>
+</section>
+<!-- ════════════════════════════════════════════════════
+     SPREAD 15 — Chapter VIII — Material Information (DMCCA 2024)
+     ════════════════════════════════════════════════════ -->
+<section class="page" data-screen-label="15 Material information">
+  <img class="print-img" src="page15-print.png" alt="">
+  <div class="mi-page">
+    <div class="mi-head">
+      <div>
+        <!-- REPLACE {{ chapter8_eyebrow }}: "Chapter VIII · Disclosure". -->
+        <div class="ed-eyebrow">{{ chapter8_eyebrow }}</div>
+        <div class="ed-rule"></div>
+        <h3 class="ed-headline smaller">Material <em>information</em></h3>
+      </div>
+      <!-- Disclosure intro paragraph — DO NOT EDIT (boilerplate compliance text). -->
+      <div class="mi-intro">
+        Provided in accordance with the Consumer Protection from Unfair Trading Regulations 2008, the Digital Markets, Competition and Consumers Act 2024, and National Trading Standards guidance on material information in property listings.
+      </div>
+    </div>
+    <!-- REPLACE every .mi-row value (.v slot). The three columns are
+         fixed Part A / Part B / Part C per UK DMCCA 2024 guidance. Mark
+         unknowns "TBC" verbatim — never invent. Drop a row only if the
+         field is genuinely not applicable to the property (e.g. "Coastal
+         Erosion" for an inland home). Add a row if the property has a
+         distinctive fact not in the canonical list (e.g. "Pool",
+         "Annexe"). Keep all keys as single-line; values can be short
+         pairs ("G · £3,890 pa") joined with "&nbsp;·&nbsp;". -->
+    <div class="mi-grid">
+      <div class="mi-section">
+        <div class="mi-label">Part A · Material to all transactions</div>
+        <div class="mi-row"><span class="k">Asking Price</span><span class="v">{{ mi_price }}</span></div>
+        <div class="mi-row"><span class="k">Tenure</span><span class="v">{{ mi_tenure }}</span></div>
+        <div class="mi-row"><span class="k">Title Number</span><span class="v">{{ mi_title_number }}</span></div>
+        <div class="mi-row"><span class="k">Council Tax Band</span><span class="v">{{ mi_council_tax }}</span></div>
+        <div class="mi-row"><span class="k">Local Authority</span><span class="v">{{ mi_local_authority }}</span></div>
+        <div class="mi-row"><span class="k">Property Type</span><span class="v">{{ mi_property_type }}</span></div>
+        <div class="mi-row"><span class="k">Year Built</span><span class="v">{{ mi_year_built }}</span></div>
+        <div class="mi-row"><span class="k">Bedrooms</span><span class="v">{{ mi_bedrooms }}</span></div>
+        <div class="mi-row"><span class="k">Bathrooms</span><span class="v">{{ mi_bathrooms }}</span></div>
+        <div class="mi-row"><span class="k">Receptions</span><span class="v">{{ mi_receptions }}</span></div>
+        <div class="mi-row"><span class="k">Floor Area</span><span class="v">{{ mi_floor_area }}</span></div>
+        <div class="mi-row"><span class="k">Heating</span><span class="v">{{ mi_heating }}</span></div>
+        <div class="mi-row"><span class="k">Electricity</span><span class="v">{{ mi_electricity }}</span></div>
+        <div class="mi-row"><span class="k">Broadband</span><span class="v">{{ mi_broadband }}</span></div>
+        <div class="mi-row"><span class="k">Mobile Signal</span><span class="v">{{ mi_mobile }}</span></div>
+        <div class="mi-row"><span class="k">Parking</span><span class="v">{{ mi_parking }}</span></div>
+        <div class="mi-row"><span class="k">EPC</span><span class="v">{{ epc_rating }}</span></div>
+      </div>
+      <div class="mi-section">
+        <div class="mi-label">Part B · Where applicable</div>
+        <div class="mi-row"><span class="k">Building Safety</span><span class="v">{{ mi_building_safety }}</span></div>
+        <div class="mi-row"><span class="k">Restrictive Covenants</span><span class="v">{{ mi_covenants }}</span></div>
+        <div class="mi-row"><span class="k">Rights of Way</span><span class="v">{{ mi_rights_of_way }}</span></div>
+        <div class="mi-row"><span class="k">Easements</span><span class="v">{{ mi_easements }}</span></div>
+        <div class="mi-row"><span class="k">Listed Building</span><span class="v">{{ mi_listed }}</span></div>
+        <div class="mi-row"><span class="k">Conservation Area</span><span class="v">{{ mi_conservation }}</span></div>
+        <div class="mi-row"><span class="k">Tree Preservation</span><span class="v">{{ mi_tpo }}</span></div>
+        <div class="mi-row"><span class="k">Accessibility</span><span class="v">{{ mi_accessibility }}</span></div>
+        <div class="mi-row"><span class="k">Water Supply</span><span class="v">{{ mi_water }}</span></div>
+        <div class="mi-row"><span class="k">Sewerage</span><span class="v">{{ mi_sewerage }}</span></div>
+        <div class="mi-row"><span class="k">Outbuildings</span><span class="v">{{ mi_outbuildings }}</span></div>
+        <div class="mi-row"><span class="k">{{ mi_part_b_extra_label }}</span><span class="v">{{ mi_part_b_extra_value }}</span></div>
+      </div>
+      <div class="mi-section">
+        <div class="mi-label">Part C · Additional material facts</div>
+        <div class="mi-row"><span class="k">Flood Risk, Rivers &amp; Seas</span><span class="v">{{ mi_flood_rivers }}</span></div>
+        <div class="mi-row"><span class="k">Flood Risk, Surface Water</span><span class="v">{{ mi_flood_surface }}</span></div>
+        <div class="mi-row"><span class="k">Coastal Erosion</span><span class="v">{{ mi_coastal }}</span></div>
+        <div class="mi-row"><span class="k">Planning</span><span class="v">{{ mi_planning }}</span></div>
+        <div class="mi-row"><span class="k">Construction</span><span class="v">{{ mi_construction }}</span></div>
+        <div class="mi-row"><span class="k">Structural</span><span class="v">{{ mi_structural }}</span></div>
+        <div class="mi-row"><span class="k">Subsidence</span><span class="v">{{ mi_subsidence }}</span></div>
+        <div class="mi-row"><span class="k">Damp</span><span class="v">{{ mi_damp }}</span></div>
+        <div class="mi-row"><span class="k">Asbestos</span><span class="v">{{ mi_asbestos }}</span></div>
+        <div class="mi-row"><span class="k">Japanese Knotweed</span><span class="v">{{ mi_knotweed }}</span></div>
+        <div class="mi-row"><span class="k">Mining</span><span class="v">{{ mi_mining }}</span></div>
+        <div class="mi-row"><span class="k">Electrical Cert.</span><span class="v">{{ mi_electrical_cert }}</span></div>
+        <div class="mi-row"><span class="k">UPRN</span><span class="v">{{ mi_uprn }}</span></div>
+      </div>
+    </div>
+    <!-- Disclosure footer — keep boilerplate; tweak only if your jurisdiction requires different wording. -->
+    <div class="mi-foot">
+      The agent has made reasonable enquiries to verify this information; prospective purchasers should satisfy themselves as to its accuracy through their own legal and survey processes. Items marked TBC will be confirmed by the seller's solicitor.
+    </div>
+  </div>
+  <div class="folio">
+    <span>{{ folio_strip }}</span>
+    <span class="folio-mid">— <em>Material information</em> —</span>
+    <span>15</span>
+  </div>
+</section>
+<!-- ════════════════════════════════════════════════════
+     BACK PAGE
+     ════════════════════════════════════════════════════ -->
+<section class="page backpage" data-screen-label="16 Back page">
+  <img class="print-img" src="backpage-print.png" alt="">
+  <div class="bg">
+    <!-- REPLACE {{ backpage_bg_src }} / {{ backpage_bg_alt }}: the back-page
+         atmospheric background. Typically a rear elevation or aerial at
+         golden hour. Filename {{ property_slug }}-26 per images.md. -->
+    <img src="images/{{ backpage_bg_src }}" alt="{{ backpage_bg_alt }}">
+  </div>
+  <div class="backpage-frame"></div>
+  <div class="backpage-inner">
+    <!-- REPLACE {{ brand_slug }}: the brand's slug from the brand pack —
+         used to resolve the LIGHT-ART logo on the dark back-page hero. The
+         brand-design SKILL writes <brand>-logo-light.png; substituting
+         {{ brand_slug }} resolves the path. Alt text is the brand name. -->
+    <div class="back-mast">
+      <img class="back-mast-logo" src="images/{{ brand_slug }}-logo-light.png" alt="{{ brand_name }}">
+    </div>
+    <!-- REPLACE {{ backpage_headline }}: "Arrange a viewing of
+         <em>{{ property_name }}</em>". The <em> on the property name is
+         consistent with the cover and opener. Don't substitute a different
+         CTA wording — this is the canonical closer. -->
+    <h2 class="back-headline">{{ backpage_headline }}</h2>
+    <!-- REPLACE {{ backpage_tagline }}: single sentence summarising the
+         property (size · key features · grounds). 25-45 words. Mirrors
+         but does not duplicate the cover/opener copy. Close with "Best
+         understood in person." or an equivalent property-specific clincher. -->
+    <p class="back-tagline">{{ backpage_tagline }}</p>
+    <div class="back-rule"></div>
+    <!-- REPLACE the agent + office cells. {{ agent_first_name }} sits in
+         <em>; {{ agent_surname }} follows in normal weight. {{ office_phone }}
+         is the display format ("01873 377 575"); {{ office_email }} the
+         contact email; {{ office_address_line_1 }} and
+         {{ office_address_line_2 }} the postal lines. -->
+    <div class="back-contact-grid">
+      <div class="cell">
+        <div class="k">The Agent</div>
+        <div class="name"><em>{{ agent_first_name }}</em> {{ agent_surname }}</div>
+        <div class="line">
+          {{ office_phone }}<br>
+          {{ office_email }}
+        </div>
+      </div>
+      <div class="cell">
+        <div class="k">The Office</div>
+        <div class="name">{{ brand_name }} <span class="dot">·</span> <em>{{ brand_town }}</em></div>
+        <div class="line">
+          {{ office_address_line_1 }}<br>
+          {{ office_address_line_2 }}
+        </div>
+      </div>
+    </div>
+    <!-- REPLACE the QR strip — TWO clickable QR codes. The qr-video.png
+         and qr-listing.png images are generated by qrencode at brochure-
+         assembly time. Each <a> wraps the QR image + label + visible URL,
+         all clickable. The visible URL beneath each QR is MANDATORY —
+         the digital reader's equivalent of scanning. See structure.md
+         "Back-page QR codes". If the listing has no video tour, drop
+         the first <a> and let the listing QR span the strip. -->
+    <div class="back-qr-strip">
+      <a class="qr" href="{{ video_url }}" target="_blank" rel="noopener">
+        <img src="images/qr-video.png" alt="Scan or click to view the property video tour">
+        <div class="qr-label">Watch the <em>video tour</em></div>
+        <div class="qr-link">{{ video_short_url }}</div>
+      </a>
+      <a class="qr" href="{{ listing_url }}" target="_blank" rel="noopener">
+        <img src="images/qr-listing.png" alt="Scan or click to view the full property listing">
+        <div class="qr-label">View the <em>full listing</em></div>
+        <div class="qr-link">{{ listing_display }}</div>
+      </a>
+    </div>
+  </div>
+  <div class="back-disclaimer">
+    These particulars, whilst believed to be accurate, are set out as a general outline only for guidance and do not constitute any part of an offer or contract. Intending purchasers should not rely on them as statements or representations of fact, but must satisfy themselves by inspection or otherwise as to their accuracy. All measurements are approximate and floor plans are drawn to indicative scale. Some images may include CGI or AI enhancements for illustrative purposes.
+  </div>
+</section>
+</body>
+</html>