Index: src/assets/css/guardian.css
===================================================================
--- src/assets/css/guardian.css	(revision 65abc8569b0cf766ad2c809114e7f385c1aff3b8)
+++ src/assets/css/guardian.css	(revision d9ad6c564eccd0e4c23c3d8c2c8a32334f2443bc)
@@ -88,2 +88,32 @@
 .g-card.feed .feed-body { margin-top: 6px; line-height: 1.4; }
 .g-card.feed .feed-body img { max-width: 100%; border-radius: 8px; }
+
+/* ── The body of a post ────────────────────────────────────────────────────
+   The 🛟 card shows a real post, so it is rendered by the same partial de
+   Krant and Berichten use (partials/note-body). These are that partial's
+   classes, in the PWA's own colours: the dashboard is standalone and does not
+   load the site's stylesheet. */
+.g-note .tl-content { line-height: 1.5; overflow-wrap: anywhere; }
+.g-note .tl-content p { margin: .35rem 0; }
+.g-note .tl-content p:first-child { margin-top: 0; }
+.g-note .tl-content p:last-child { margin-bottom: 0; }
+.g-note .tl-content a { color: var(--accent); }
+.g-note img.emoji { height: 1.25em; width: auto; margin: 0 .05em; vertical-align: -.2em;
+  display: inline-block; border-radius: 0; background: none; }
+
+/* Quote card and link preview: one card, two origins. */
+.g-note .tl-quote { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px;
+  border: 1px solid var(--line); background: var(--card-2, rgba(128,128,128,.07)); }
+.g-note .tl-quote-head { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; min-width: 0; }
+.g-note .tl-quote-avatar { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
+.g-note .tl-quote-name { font-weight: 600; font-size: .82rem; white-space: nowrap; }
+.g-note .tl-quote-handle { color: var(--sub); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.g-note .tl-quote-body { color: var(--sub); font-size: .88rem; line-height: 1.45; max-height: 14em; overflow: hidden; }
+.g-note .tl-quote-media { display: block; margin: 6px 0 0; }
+
+/* The capture a 🛟 usually carries. */
+.g-note .tl-media { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; }
+.g-note .tl-media-img { display: block; border-radius: 10px; overflow: hidden; }
+.g-note .tl-media-img img { width: 100%; height: auto; display: block; background: #fff; }
+.g-note .tl-media-video, .g-note .tl-media-audio { width: 100%; margin: 8px 0 0; border-radius: 10px; display: block; }
+.g-note .tl-media-video { max-height: 320px; background: #000; }
Index: src/assets/js/guardian.js
===================================================================
--- src/assets/js/guardian.js	(revision 65abc8569b0cf766ad2c809114e7f385c1aff3b8)
+++ src/assets/js/guardian.js	(revision d9ad6c564eccd0e4c23c3d8c2c8a32334f2443bc)
@@ -43,9 +43,17 @@
       var card = el('div', 'g-card help');
       var row = el('div', 'row');
-      row.appendChild(el('span', 'who grow', h.actor_name || handleOf(h.actor_uri, h.actor_handle)));
+      var who = el('span', 'who grow');
+      // name_html carries the custom emojis (FEP-9098) of the display name, the
+      // same way de Krant renders a byline. Falls back to the plain name.
+      if (h.name_html) who.innerHTML = h.name_html;
+      else who.textContent = h.actor_name || handleOf(h.actor_uri, h.actor_handle);
+      row.appendChild(who);
       row.appendChild(el('span', 'when', when(h.published || h.created_at)));
       card.appendChild(row);
-      var body = el('div', 'body');
-      body.innerHTML = h.content || '';          // sanitized server-side on ingest
+      var body = el('div', 'body g-note');
+      // body_html is the shared note-body partial, rendered server-side: the
+      // content with its emojis, the quote / link-preview card and the media.
+      // Falls back to the bare content for rows stored before that existed.
+      body.innerHTML = h.body_html || h.content || '';   // sanitized server-side on ingest
       card.appendChild(body);
       if (h.note_url) {