1 files changed, 34 insertions, 2 deletions
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;