hermes.x: fix the top-nav wordmark

Rendered as "hermes .x" with a visible gap because the brand link's
inline-flex (gap:8px) treated the text and the <span class="x"> as two
separate flex children, so the gap meant for the mark→text separation
landed between the two halves of the name too. Wrap the whole wordmark
in one span and give the display name its capital letters at the same
time, so the brand reads "Hermes.X" like the kit says.

Three places share the markup — the top nav on index, branding and
messenger — all three fixed.

branding/index.html

@@ -45,7 +45,7 @@
 <nav class="topnav">
   <a class="brand" href="../">
     <img src="../assets/mark.webp" alt="Hermes" width="5" height="22" style="display:block">
-    hermes<span class="x">.x</span>
+    <span>Hermes<span class="x">.X</span></span>
   </a>
   <a href="../">Overview</a>
   <a href="../messenger/">Messenger</a>

index.html

@@ -23,7 +23,7 @@
 <nav class="topnav">
   <a class="brand" href="./">
     <img src="assets/mark.webp" alt="Hermes" width="5" height="22" style="display:block">
-    hermes<span class="x">.x</span>
+    <span>Hermes<span class="x">.X</span></span>
   </a>
   <a href="./" class="here">Overview</a>
   <a href="messenger/">Messenger</a>

messenger/index.html

@@ -86,7 +86,7 @@
 <nav class="topnav">
   <a class="brand" href="../">
     <img src="../assets/mark.webp" alt="Hermes" width="5" height="22" style="display:block">
-    hermes<span class="x">.x</span>
+    <span>Hermes<span class="x">.X</span></span>
   </a>
   <a href="../">Overview</a>
   <a href="./" class="here">Messenger</a>