feat(ui): the M of the wordmark is the logo

The stylised M replaces the letter M in "MeshBay" at the top left; `eshBay`
beside it stays text.

**The source artwork is now in git.** It was in `QE/`, which is gitignored, so
it would not have survived a clone — and the tree is about to be moved to
another machine. `assets/brand/` holds the original and the `convert` command
that derives the 10 KB nav asset from it (trimmed, 72px tall for a picture shown
at 30, so it survives a 2× screen). Verified: the documented command reproduces
the committed file byte for byte.

The derived file is in `_ASSETS`, which is what the `/a/<hash>/` fingerprint is
computed from. A file missing from that list is a file whose change never moves
the URL, so a browser holding the old one never asks again — the comment on that
list says so, and a logo is exactly the kind of asset one would forget.

Its URL is resolved from `import.meta.url`, so the hub's fingerprinted path and
the application's `app://` scheme both come out right without either being named
in the source.

**The two sizes are independent, and that took four rounds to get right.** The
picture's height was written in `em` — a fraction of the lettering — so every
adjustment to the text resized the picture by the same stroke and the ratio
between them could never change. The operator spotted the coupling before I did
("si on change la taille du M, tu vas encore tout décaler"). The height is in
pixels now: `font-size: 1.375em` (22px) and `height: 30px`, two knobs that move
one thing each. The vertical nudge went with it — it was correcting a
misalignment I was causing myself.

Also: the wordmark blue goes one step down from sky-400 towards sky-500. It sat
brighter than the picture next to it, which made the two read as different
materials rather than one object.

A note on how this went wrong first: I checked the result on a mock HTML page I
wrote, not in the application. The picture was loading the whole time, but at
25px against a 29px line box it was *smaller* than the letters, so the wordmark
read as unchanged and the report was "none of what I asked for was done". Every
size since has been measured in the running window over CDP.

883 tests pass.

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

4 files changed, 43 insertions, 4 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/api/webapp.py b/packages/meshbay-hub/src/meshbay_hub/api/webapp.py
index 7028071..19d22d4 100644
--- a/packages/meshbay-hub/src/meshbay_hub/api/webapp.py
+++ b/packages/meshbay-hub/src/meshbay_hub/api/webapp.py
@@ -28,7 +28,7 @@ router = APIRouter(tags=["webapp"])
 # which is the failure this list exists to prevent, and it is silent.
 _ASSETS = ("style.css", "keyderive.js", "crypto.js", "transport.js", "app.js",
            "i18n.js", "downloads.js", "transfers.js", "zipstream.js",
-           "platform.js")
+           "platform.js", "meshbay-m.png")
 
 
 def _asset_version() -> str:
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/app.js b/packages/meshbay-hub/src/meshbay_hub/static/app.js
index 0843d1d..2e3c422 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/app.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/app.js
@@ -400,6 +400,11 @@ const ICON_PATHS = {
   close:    ['M6 6l12 12M18 6L6 18'],
 };
 
+// The M of the wordmark is a picture; the rest is text. Resolved from this
+// module's own URL so the hub's fingerprinted path and the application's
+// app:// scheme both come out right without either being named here.
+const BRAND_M = new URL('./meshbay-m.png', import.meta.url).href;
+
 function Icon({ name, cls = '' }) {
   const paths = ICON_PATHS[name];
   if (!paths) return null;
@@ -579,7 +584,9 @@ function Nav({ user, theme, onThemeChange, onLogout, onMenuToggle, unreadCount,
           <button class="nav-hamburger" onClick=${onMenuToggle}
             aria-label="${t('nav.toggle_menu')}"><${Icon} name="menu" /></button>
         `}
-        <a class="nav-brand" href="#/">MeshBay</a>
+        <a class="nav-brand" href="#/">
+          <img class="nav-brand-m" src=${BRAND_M} alt="M" />eshBay
+        </a>
       </div>
       <div class="nav-right">
         ${user && html`<${TransferWidget} />`}
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/meshbay-m.png b/packages/meshbay-hub/src/meshbay_hub/static/meshbay-m.png
new file mode 100644
index 0000000..a682f33
--- /dev/null
+++ b/packages/meshbay-hub/src/meshbay_hub/static/meshbay-m.png
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css
index 12fc15f..238f33a 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/style.css
+++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css
@@ -19,7 +19,9 @@
   --success: #22c55e;
   --nav-bg: #0f172a;
   --nav-text: #e2e8f0;
-  --nav-brand: #38bdf8;
+  /* One step down from sky-400 towards sky-500: the wordmark sat brighter than
+     the picture beside it, which made the two read as different materials. */
+  --nav-brand: #23b1f0;
   --sidebar-bg: #f1f5f9;
   --sidebar-hover: #e2e8f0;
   --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
@@ -92,11 +94,41 @@ a:hover { text-decoration: underline; }
 .nav-brand {
   color: var(--nav-brand);
   font-weight: 700;
-  font-size: 1.15em;
+  /* 22px measured in the application. 1.15em was lettering sized for plain
+     text and read as a caption beside the picture; 1.45em overshot. */
+  font-size: 1.375em;
   text-decoration: none;
 }
 .nav-brand:hover { text-decoration: none; }
 
+/* The M is a picture standing in for a letter, so it is sized in `em` and
+   follows the wordmark rather than being pinned to a pixel height.
+
+   Sized by measuring the running application, twice. At 1.35em of the old
+   font size it rendered 25px against a 29px line box — *smaller* than the
+   letters beside it, so the wordmark read as unchanged. At 1.9em it was 35px
+   against 29px, which overshot the other way. The pair is now set together:
+   the picture leads, the lettering follows a little behind it. */
+.nav-brand {
+  display: inline-flex;
+  align-items: center;
+}
+.nav-brand-m {
+  /* **In pixels, not `em` — and that is the point.** Written in `em` this was
+     a fraction of the lettering's size, so every adjustment to the text moved
+     the picture too and the pair could never be settled: making the words
+     bigger made the M bigger by the same stroke, and the ratio never changed.
+     Two independent things need two independent numbers.
+
+     30px against 22px of lettering. */
+  height: 30px;
+  width: auto;
+  /* Positive, deliberately. The glyph this replaces carried its own side
+     bearing and an image has none, so without this the picture sits flush
+     against the "e". */
+  margin-right: 4px;
+}
+
 .nav-hamburger {
   display: none;
   background: none;