Current

src/components/Wordmark.astro

@@ -1,16 +1,26 @@
 ---
-/** The wordmark is set in type. No symbol, no colour. */
-interface Props { class?: string }
-const { class: className } = Astro.props;
+/** The logo, as supplied. Sized by its height so it sits on the header's baseline grid.
+    `inline` writes it into the page as a data URI, so it paints with the first frame instead of
+    blinking in on every navigation; the header needs that, the footer does not. */
+import logoInline from '../assets/logo.webp?inline';
+import logoUrl from '../assets/logo.webp?url';
+
+interface Props { class?: string; inline?: boolean }
+const { class: className, inline = false } = Astro.props;
 ---
-<span class:list={['wordmark', className]}>CipherCell</span>
+<img
+  class:list={['wordmark', className]}
+  src={inline ? logoInline : logoUrl}
+  alt="CipherCell"
+  width="311"
+  height="72"
+  loading={inline ? undefined : 'lazy'}
+/>
 
 <style>
   .wordmark {
-    display: inline-block;
-    font-weight: var(--weight-medium);
-    letter-spacing: var(--track-h3);
-    font-size: var(--step-h3);
-    line-height: 1;
+    display: block;
+    height: var(--space-5);
+    width: auto;
   }
 </style>