feat(ui): a caution mark where the tagline's bullet was

The masthead's separator between "quantus mining" and "this is sparta" is now
the caution mark rather than a middle dot, scaled to the line it sits on.

`.mark-tagline` gains an explicit `line-height` for that reason: the image is
sized from it, and a line height inherited from `body` would quietly resize the
mark the day the body's changed. The height is declared twice — `1.4em` then
`1lh` — which is the same number here precisely because the line height above
is stated, so a browser that does not know the unit lands in the same place
rather than near it.

`alt` is empty and `aria-hidden` is set, on purpose. The mark stands in for
punctuation and the words either side already say what it says; announcing it
would be reading the separator aloud.

Imported as a hashed asset like the portrait, and it keeps its own transparency
rather than being given a ground — the masthead sits on a radial glow, not a
flat surface, so a background would show as a rectangle.

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

web/src/App.tsx

@@ -33,6 +33,7 @@ import { SectionNav } from './components/SectionNav'
 import { ThemeToggle } from './components/ThemeToggle'
 import { StateIndex } from './components/StateIndex'
 import { StatBar } from './components/StatBar'
+import cautionSparta from './assets/caution-sparta.png'
 import { AboutPanel } from './components/AboutPanel'
 import { VestingPanel } from './components/VestingPanel'
 import { WormholeStage } from './components/WormholeStage'
@@ -119,7 +120,15 @@ export default function App() {
             <div className="mark-name">
               blackbeard<span>.observer</span>
             </div>
-            <div className="mark-tagline">quantus mining · this is sparta</div>
+            <div className="mark-tagline">
+              quantus mining{' '}
+              {/* In place of the separator the bullet used to be. Decorative,
+                  so `alt` is empty on purpose: the words either side already
+                  say it, and a screen reader announcing an image between them
+                  would be reading the punctuation aloud. */}
+              <img className="tagline-mark" src={cautionSparta} alt="" aria-hidden="true" /> this is
+              sparta
+            </div>
           </div>
         </div>
 

web/src/index.css

@@ -264,6 +264,23 @@ a {
   text-transform: uppercase;
   color: var(--text-muted);
   margin-top: 5px;
+  /* Stated rather than inherited, because the mark between the two halves is
+     sized from it — a line height that moved with the body's would quietly
+     resize the image. */
+  line-height: 1.4;
+}
+
+/* The mark standing where the bullet separator was, scaled to the line it sits
+   on. `1lh` is exactly that; the `em` above it is the same number for browsers
+   that do not know the unit, and is only equal because the line height above is
+   declared rather than inherited. */
+.tagline-mark {
+  height: 1.4em;
+  height: 1lh;
+  width: auto;
+  vertical-align: -0.28em;
+  /* The masthead sits on a radial glow rather than a flat surface, so the
+     image keeps its own transparency instead of being given a ground. */
 }
 
 .masthead-right {