Wear the mark in the menubar

The stand-in it replaces was a generic starburst in --accent: a glyph
that said "instrument" and nothing about which one.

The tight crop, not the padded app icon. Two pieces of artwork for two
jobs — the icon is squared and padded because an operating system draws
it in a tile of its own, and beside type that padding reads as the mark
having drifted away from the words.

Sized to 13px against a cap height the browser reports as 10px. 15 and 17
were tried side by side on both grounds: at 15 the mark starts to outweigh
the words and at 17 it is a badge with a caption. This is chrome on a
surface used fifty times an hour, and the mark's job is to identify the
window rather than to be looked at.

It sits outside both ground blocks, unlike every other colour in the file.
The spectral ramp *is* the identity here, and re-deriving it per ground
would be re-deriving the brand — which is also why only the wordmark ever
needed a light and a dark cut, and what differed there was its text.

Screenshots regenerated: they carried neither the mark nor the Spectrum
tab, and a front page that has drifted from the build is wrong rather
than merely old.

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

Author: ehsun-sh

docs/images/studio-graphite.png

@@ -629,3 +629,28 @@ def test_the_page_carries_the_current_mark() -> None:
             f"the studio page carries a stale copy of assets/{name}. "
             f'Re-inline it as a data URI on the <link rel="icon"> for {size}.'
         )
+
+
+def test_the_menubar_wears_the_mark() -> None:
+    """And it is the tight crop, not the padded app icon.
+
+    Two different pieces of artwork for two different jobs. The icon is squared
+    and padded because an operating system draws it in a tile of its own; the
+    menubar sets it beside type, where that padding reads as the mark having
+    drifted away from the words. Picking either one for both is the mistake this
+    guards.
+    """
+    text = STUDIO.read_text(encoding="utf-8")
+    expected = base64.b64encode((ROOT / "assets" / "logo-mark-tight.png").read_bytes()).decode(
+        "ascii"
+    )
+    assert (
+        f'class="brand-mark" alt="" aria-hidden="true" src="data:image/png;base64,{expected}"'
+        in text
+    ), (
+        "the menubar carries a stale copy of assets/logo-mark-tight.png. "
+        "Re-inline it as the .brand-mark data URI."
+    )
+    # Decorative: the name is right beside it in text, so announcing the mark
+    # too would have a screen reader say the product twice.
+    assert 'class="brand-mark" alt="" aria-hidden="true"' in text