Add site logo to header

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

assets/css/main.css

@@ -89,12 +89,15 @@ header.site .inner {
   flex-wrap: wrap;
 }
 header.site .brand {
-  font-family: var(--font-heading);
+  display: flex;
-  font-weight: 700;
+  align-items: center;
-  font-size: 1.1rem;
-  color: #ffffff;
   text-decoration: none;
 }
+header.site .brand img {
+  height: 44px;
+  width: auto;
+  display: block;
+}
 /* The nav gets its own Soft Plum band nested in the sapphire header, per
    the brand notes' "Navigation Bar: Soft Plum" — distinct from the header's
    own sapphire background rather than inheriting it. */

layouts/_default/baseof.html

@@ -21,7 +21,11 @@
 
   <header class="site">
     <div class="inner">
-      <a class="brand" href="/">{{ .Site.Title }}</a>
+      {{ $logo := resources.Get "images/logo-white.png" }}
+      {{ $logoSm := $logo.Resize "480x" }}
+      <a class="brand" href="/">
+        <img src="{{ $logoSm.RelPermalink }}" width="{{ $logoSm.Width }}" height="{{ $logoSm.Height }}" alt="{{ .Site.Title }}">
+      </a>
       <nav aria-label="Primary">
         {{ range .Site.Menus.main }}
         <a href="{{ .URL }}">{{ .Name }}</a>