docs(humans): ship the MD explainer as a PDF with the images baked in

The HTML references screenshots relatively, so it only renders inside a
checkout -- mailing the file on its own gives broken images. The PDF is one
self-contained file, which is what actually gets sent to Ozlem.

- tools/humans_to_pdf.py: renders .humans/*.html via headless Chrome (or
  Edge), so the output is what the browser shows. HTML stays the source.
- @media print block on the page: the wide tables and the pipeline diagram
  scroll on screen but would be cut off at the paper edge; this reflows
  them and keeps figures, callouts and table rows off page breaks.
  Verified at A4 content width -- 6 pages, both screenshots embedded.
- *.pdf -> LFS. Each regeneration is a whole new ~2 MB blob, and unlike
  png/jpg there are no PDFs tracked raw yet, so there is no history to
  rewrite by adding it now.

Also corrects working-files.md: it claimed .gitattributes does not LFS-track
.blend, which was true when written and is no longer -- .blend/.zprj/.obj/
.npy/.npz have since been added. The note now covers what is actually still
excluded (png/jpg, deliberately) and why that makes QA renders scratch.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

.humans/README.md

@@ -1,7 +1,7 @@
 # .humans/ — pages written for people, not agents
 
-Self-contained HTML pages explaining how parts of this repo work, for reading in
-a browser. Same convention as `ariki-game/.humans/`.
+Explainers about how parts of this repo work. Same convention as
+`ariki-game/.humans/`: an HTML page per topic, read in a browser.
 
 The operating detail lives in `.claude/skills/` and `.agents/` and is written for
 whoever is driving the tools. These pages are the **explanation** — what we built,
@@ -10,7 +10,21 @@ skill/wiki is the source of truth.
 
 | page | about |
 |---|---|
-| `marvelous-designer.html` | How we author Ariki's garments as real sewn cloth in Marvelous Designer — the process, what's been made, the traps, what's still unsolved. Written for Özlem and Jeremy. |
+| `marvelous-designer` | How we author Ariki's garments as real sewn cloth in Marvelous Designer — the process, what's been made, the traps, what's still unsolved. Written for Özlem and Jeremy. |
 
-Images are referenced relatively (`../tools/tailor/screenshots/…`), so open these
-from inside the repo rather than copying the file out on its own.
+## HTML is the source; the PDF is what you send
+
+The HTML references screenshots relatively (`../tools/tailor/screenshots/…`), so it
+only renders from inside a checkout — mail someone the `.html` on its own and they
+get broken images. The **PDF has the images baked in** and travels as one file.
+
+Edit the HTML, then regenerate:
+
+```
+python tools/humans_to_pdf.py --all              # or a single page
+```
+
+That drives headless Chrome, so what you get is exactly what the browser shows.
+Each page carries an `@media print` block controlling the paper layout — without it
+the wide tables and the pipeline diagram, which merely scroll on screen, get cut
+off at the page edge. Commit the HTML and the PDF together so they don't drift.

.humans/marvelous-designer.html

@@ -114,6 +114,36 @@
     .callout p:last-child { margin-bottom: 0; }
     .meta { color: var(--muted); font-size: .85rem; border-top: 1px solid var(--line); margin-top: 3.5rem; padding-top: 1.2rem; }
     hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0 0; }
+
+    /* PDF export — `python tools/humans_to_pdf.py` drives headless Chrome.
+       Screen rules scroll wide content; on paper it would simply be cut off. */
+    @media print {
+      @page { size: A4; margin: 12mm; }
+      html, body {
+        background: #0b1113 !important;
+        -webkit-print-color-adjust: exact;
+        print-color-adjust: exact;
+      }
+      body { padding: 0; font-size: 10pt; line-height: 1.5; }
+      h1 { font-size: 26pt; margin-bottom: .6rem; }
+      h2 { font-size: 13pt; margin: 20pt 0 6pt; }
+      h3 { font-size: 10.5pt; margin: 12pt 0 4pt; }
+      p, li { max-width: none; }
+      a { text-decoration: none; }
+      /* Wide content is scrollable on screen; on paper it must reflow. */
+      .wrap { overflow: visible; }
+      table { min-width: 0; font-size: 8.5pt; }
+      th, td { padding: .5rem .7rem; }
+      .flow { padding: .8rem 1rem; overflow: visible; }
+      .flow pre { font-size: 7pt; line-height: 1.5; }
+      /* Never split a figure, table row, callout or diagram across a page. */
+      figure, .callout, .flow, .wrap, tr { break-inside: avoid; page-break-inside: avoid; }
+      h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
+      figure img { max-height: 16cm; width: auto; margin: 0 auto; }
+      figcaption { font-size: 8.5pt; }
+      .shots { display: block; }
+      .meta { margin-top: 20pt; font-size: 8pt; }
+    }
   </style>
 </head>
 <body>