Add the Bond: 10 animal companions, with sheet support and rules

Companions were a single line on the Ranger's edge; now they are a real
subsystem, rollable or pickable, with art, tokens and a place on the sheet.

- New compendium "companions" (VANITY · Animal Companions): 10 beasts as full
  NPC actors with painted core artwork, droppable as tokens — wolf, hawk, owl,
  raven, hound, lynx, serpent, stag, great bat, ram. Each keeps the printed
  baseline (Grit 3, attacks at 3 dice) and differs in dodge (2-4d), senses and
  one distinctive trick, plus which companion action it favours.
- New d10 roll table, "The Bond — Animal Companions".
- Ranger sheet: the companion block is now a card — art, name, kind, attack,
  dodge, Grit (with a DOWNED flag), its trick, and one-click Help / Harry /
  Guard (each posting what it does to chat) plus Attack and Dodge rolls.
  "Roll the Bond" rolls the d10 and binds the beast straight onto the sheet.
- template.json: companion gains kind, img, dodge, trick.
- Rules updated in both places: §9a in the Draft 13 source (so the in-world
  journal carries it) and a new Bond section in the player rulebook, which is
  regenerated to HTML + PDF (39pp).
- Version -> 0.9.6; README/FOUNDRY/system description updated (13 compendia).

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

styles/vanity.css

@@ -425,10 +425,43 @@
 
 /* ---------------- Companion ---------------- */
 
-.vanity-sheet .companion-grid { display: grid; grid-template-columns: 2fr 1fr 1.4fr auto; gap: 10px; align-items: end; }
-.vanity-sheet .companion-grid .wide { grid-column: 1 / -1; }
-.vanity-sheet .companion-grid input[type="number"] { width: 44px; text-align: center; }
-.vanity-sheet .companion-roll { padding: 5px 12px; }
+.vanity-sheet .companion-card { display: flex; gap: 12px; align-items: flex-start; }
+.vanity-sheet .cmp-art {
+  flex: none; width: 92px; height: 92px; border-radius: 6px; overflow: hidden;
+  border: 1.5px solid var(--v-gold); background: var(--v-paper2);
+}
+.vanity-sheet .cmp-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.vanity-sheet .cmp-art-empty {
+  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
+  color: var(--v-line); font-size: 30px;
+}
+.vanity-sheet .cmp-body { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
+.vanity-sheet .cmp-line { display: flex; gap: 10px; align-items: end; }
+.vanity-sheet .cmp-line .grow { flex: 1; min-width: 0; }
+.vanity-sheet .companion-card input[type="number"] { width: 42px; text-align: center; }
+.vanity-sheet .companion-card .sl { color: var(--v-ink2); padding: 0 2px; }
+.vanity-sheet .companion-card .wide { width: 100%; }
+.vanity-sheet .cmp-downed {
+  font-family: "Cinzel", Georgia, serif; font-size: 9px; letter-spacing: .1em;
+  color: #fff; background: #8a2f2f; border-radius: 8px; padding: 2px 8px; align-self: center;
+}
+.vanity-sheet .cmp-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
+.vanity-sheet .cmp-actions .cap { width: 100%; margin-bottom: 1px; }
+.vanity-sheet .cmp-act, .vanity-sheet .cmp-roll {
+  padding: 4px 10px; font-size: 11px; border: 1.3px solid var(--v-line);
+  border-radius: 12px; background: var(--v-paper2); cursor: pointer; white-space: nowrap;
+}
+.vanity-sheet .cmp-act b { color: var(--v-teal); font-weight: 600; }
+.vanity-sheet .cmp-act:hover, .vanity-sheet .cmp-roll:hover {
+  border-color: var(--v-gold); background: rgba(176,135,47,.10);
+}
+.vanity-sheet .cmp-roll { border-color: var(--v-teal); color: var(--v-teal-d); }
+.vanity-sheet .cmp-bond {
+  float: right; margin: -2px 0 0; padding: 2px 9px; font-size: 10px;
+  border: 1.2px solid var(--v-gold); border-radius: 10px; background: transparent;
+  color: var(--v-paper); cursor: pointer;
+}
+.vanity-sheet .cmp-bond:hover { background: rgba(255,255,255,.14); }
 
 /* ---------------- NPC sheet ---------------- */