Improve callouts and symbol publishing

CONTENT_BRIDGE.md

@@ -92,7 +92,9 @@ Use colocated relative assets:
 Quarto image attributes such as `{width=70%}` were removed during import. Going
 forward, use normal Markdown and let Astro CSS handle presentation.
 
-Quarto callouts were converted to portable blockquotes:
+### Callouts
+
+Write callouts as portable blockquotes. This is the canonical form:
 
 ```markdown
 > **Note**
@@ -100,7 +102,7 @@ Quarto callouts were converted to portable blockquotes:
 > Text of the callout.
 ```
 
-Use the same convention for new notes:
+Supported labels are `Note`, `Tip`, `Warning`, `Caution`, and `Aside`:
 
 ```markdown
 > **Warning**
@@ -108,12 +110,78 @@ Use the same convention for new notes:
 > This point needs attention.
 ```
 
+Obsidian-style labels also work:
+
+```markdown
+> [!tip]
+> This is a tip.
+```
+
+For quick writing, a few leading emoji markers are recognized and stripped:
+
+```markdown
+> 📝 This becomes a note.
+> 💡 This becomes a tip.
+> ⚡ This also becomes a tip.
+> ⚠️ This becomes a warning.
+```
+
+In Astro these render as `<aside class="callout callout-note">`, etc. In the
+PDF pipeline they render as pastel `tcolorbox` blocks:
+
+```text
+note    -> blognotebox
+tip     -> blogtipbox
+warning -> blogwarningbox
+caution -> blogcautionbox
+aside   -> blogasidebox
+```
+
+The LaTeX boxes use `tcolorbox` with the `breakable` and `enhanced` libraries,
+a light tinted background, a thin frame, a stronger left rule, and a small
+attached title label. This follows the same design vocabulary as the DM book
+callouts: compact colored boxes that can split across pages without becoming
+visually heavy.
+
 Quarto margin notes such as `[text]{.aside}` were converted to:
 
 ```markdown
 > **Aside:** text
 ```
 
+### Emoji And Symbol Text
+
+Write emoji, chess pieces, and card suits directly in Markdown:
+
+```markdown
+I like this move: ♘f3. Hearts and diamonds are red: ♥ ♦. Spades and clubs are black: ♠ ♣.
+This reminder is visible in both outputs: 🎯
+```
+
+Astro wraps these glyphs in small semantic spans so they get stable font
+fallbacks and accessible labels:
+
+```html
+<span class="symbol symbol-chess" data-symbol="white-knight" aria-label="white knight">♘</span>
+<span class="symbol symbol-card" data-symbol="heart" aria-label="heart">♥</span>
+<span class="symbol symbol-emoji">🎯</span>
+```
+
+The PDF pipeline maps the same characters to LaTeX macros:
+
+```text
+emoji and emoji sequences -> \BlogEmojiText{...} using the emoji package
+♔ ♕ ♖ ♗ ♘ ♙       -> \BlogChessWhite{\symking}, etc. using chessfss
+♚ ♛ ♜ ♝ ♞ ♟       -> \BlogChessBlack{\symking}, etc. using chessfss
+♥ ♡ ♦ ♢           -> red \heartsuit / \diamondsuit via amssymb + xcolor
+♠ ♤ ♣ ♧           -> black \spadesuit / \clubsuit via amssymb + xcolor
+playing-card emoji -> \BlogEmojiText{...}
+```
+
+Use Unicode characters in the source. Do not write LaTeX-only symbols in posts
+unless the post is PDF-only, because raw LaTeX will not generally survive the
+HTML path.
+
 ## Semantic Blocks
 
 Use Pandoc-style fenced attributes for blocks that need to render differently
@@ -303,9 +371,18 @@ npm run pdf:post -- sites/research/src/content/research/example/index.md --out /
 The command runs:
 
 - `scripts/pandoc-filters/semantic-blocks.lua` to convert interactive and
-  environment fences.
+  environment fences, internal links, Markdown callouts, emoji, chess pieces,
+  and card suits.
 - `scripts/pandoc-templates/semantic-preamble.tex` to load `amsthm`,
-  `cleveref`, and the shared theorem definitions.
+  `cleveref`, `tcolorbox`, `emoji`, `chessfss`, and the shared theorem,
+  callout, and symbol definitions.
+
+Current smoke-test PDFs live outside the repo:
+
+```text
+/private/tmp/blog-pdf-samples/callout-symbol-test.pdf
+/private/tmp/blog-pdf-samples/vibes-building-interactives.pdf
+```
 
 The PDF route is intentionally separate from Astro. Astro owns HTML rendering;
 Pandoc owns PDF rendering. The Markdown conventions above are the shared