diff --git a/src/components/layout/SiteHeader.vue b/src/components/layout/SiteHeader.vue
index 4a546fa..354ba25 100644
--- a/src/components/layout/SiteHeader.vue
+++ b/src/components/layout/SiteHeader.vue
@@ -36,7 +36,12 @@ const mobileOpen = ref(false)
         class="text-foreground"
         :aria-label="t('brand')"
       >
-        <Wordmark size="sm" />
+        <span
+          class="font-serif text-sm font-semibold uppercase tracking-[0.22em] md:hidden"
+        >
+          Earth Walker
+        </span>
+        <Wordmark size="sm" class="hidden md:inline-flex" />
       </RouterLink>
 
       <nav class="hidden items-center gap-8 md:flex">
diff --git a/src/components/layout/Wordmark.vue b/src/components/layout/Wordmark.vue
index cd5b59b..e325f27 100644
--- a/src/components/layout/Wordmark.vue
+++ b/src/components/layout/Wordmark.vue
@@ -31,15 +31,25 @@ const designClasses: Record<Size, string> = {
 <template>
   <span
     :class="[
-      'inline-flex items-baseline border border-current uppercase',
+      'inline-flex flex-nowrap items-baseline whitespace-nowrap border border-current uppercase',
       frameClasses[props.size],
     ]"
     aria-label="Earth Walker Design"
   >
-    <span :class="['font-serif font-semibold', earthClasses[props.size]]">
+    <span
+      :class="[
+        'whitespace-nowrap font-serif font-semibold',
+        earthClasses[props.size],
+      ]"
+    >
       Earth Walker
     </span>
-    <span :class="['font-serif font-light opacity-90', designClasses[props.size]]">
+    <span
+      :class="[
+        'whitespace-nowrap font-serif font-light opacity-90',
+        designClasses[props.size],
+      ]"
+    >
       Design
     </span>
   </span>