diff --git a/assets/css/main.css b/assets/css/main.css
index 17f1a4f..21d9a88 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -89,12 +89,15 @@ header.site .inner {
   flex-wrap: wrap;
 }
 header.site .brand {
-  font-family: var(--font-heading);
-  font-weight: 700;
-  font-size: 1.1rem;
-  color: #ffffff;
+  display: flex;
+  align-items: center;
   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. */
diff --git a/assets/images/logo-white.png b/assets/images/logo-white.png
new file mode 100644
index 0000000..28efd55
Binary files /dev/null and b/assets/images/logo-white.png differ
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 1e41432..fe6c688 100644
--- a/layouts/_default/baseof.html
+++ b/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>