feat: stacked EARTH WALKER / DESIGN wordmark

Carries forward the original site's wordmark — EARTH WALKER set in
serif semibold over a smaller, lighter, wider-tracked DESIGN —
adapted to use Fraunces from our type system. Centered stack, no
frame, themed via currentColor so it inverts cleanly on the dark
hero overlay and follows the active palette and theme.

Two sizes: 'sm' (header, footer, mobile drawer) scales text-sm →
text-base at md; 'lg' (home hero overlay) scales text-2xl → text-3xl
→ text-4xl across breakpoints. Whitespace-nowrap holds the shape
together regardless of container width.

Used in:
  - SiteHeader logo slot (sm)
  - Mobile Sheet drawer header (sm)
  - SiteFooter brand block (sm)
  - HomeView hero overlay above the headline (lg)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/layout/SiteFooter.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { RouterLink } from 'vue-router'
 import { useI18n } from 'vue-i18n'
+import Wordmark from './Wordmark.vue'
 
 const { t } = useI18n({ useScope: 'global' })
 const year = new Date().getFullYear()
@@ -11,8 +12,8 @@ const year = new Date().getFullYear()
     <div
       class="mx-auto flex max-w-[1400px] flex-col items-start justify-between gap-6 px-6 py-12 md:flex-row md:items-center md:px-10"
     >
-      <div class="space-y-1">
+      <div class="space-y-3">
-        <p class="font-serif text-base tracking-[0.18em] uppercase">{{ t('brand') }}</p>
+        <Wordmark size="sm" class="text-foreground" />
         <p class="text-muted-foreground text-xs">{{ t('footer.tagline') }}</p>
       </div>
       <div class="flex items-center gap-8">

src/components/layout/SiteHeader.vue

@@ -12,6 +12,7 @@ import {
 } from '@/components/ui/sheet'
 import ThemeToggle from './ThemeToggle.vue'
 import LocaleSwitcher from './LocaleSwitcher.vue'
+import Wordmark from './Wordmark.vue'
 
 const { t } = useI18n({ useScope: 'global' })
 
@@ -32,9 +33,10 @@ const mobileOpen = ref(false)
     >
       <RouterLink
         to="/"
-        class="text-foreground font-serif text-lg tracking-[0.18em] uppercase"
+        class="text-foreground inline-flex items-center"
+        :aria-label="t('brand')"
       >
-        {{ t('brand') }}
+        <Wordmark size="sm" />
       </RouterLink>
 
       <nav class="hidden items-center gap-8 md:flex">
@@ -63,9 +65,8 @@ const mobileOpen = ref(false)
           </SheetTrigger>
           <SheetContent side="right" class="w-full sm:max-w-sm">
             <SheetHeader>
-              <SheetTitle class="font-serif tracking-[0.18em] uppercase">
+              <SheetTitle class="sr-only">{{ t('brand') }}</SheetTitle>
-                {{ t('brand') }}
+              <Wordmark size="sm" class="text-foreground" />
-              </SheetTitle>
             </SheetHeader>
             <nav class="mt-10 flex flex-col gap-6 px-4">
               <RouterLink

src/components/layout/Wordmark.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+type Size = 'sm' | 'lg'
+
+const props = withDefaults(
+  defineProps<{
+    /** Visual size — controls type scale. 'sm' for header/footer, 'lg' for hero. */
+    size?: Size
+  }>(),
+  { size: 'sm' },
+)
+
+const earthClasses: Record<Size, string> = {
+  sm: 'text-sm tracking-[0.22em] md:text-base md:tracking-[0.24em]',
+  lg: 'text-2xl tracking-[0.24em] md:text-3xl lg:text-4xl md:tracking-[0.26em]',
+}
+
+const designClasses: Record<Size, string> = {
+  sm: 'text-[0.55rem] tracking-[0.42em] md:text-[0.65rem] md:tracking-[0.46em]',
+  lg: 'text-xs tracking-[0.46em] md:text-sm md:tracking-[0.5em] lg:text-base',
+}
+
+const gapClasses: Record<Size, string> = {
+  sm: 'gap-[0.2em]',
+  lg: 'gap-[0.25em]',
+}
+</script>
+
+<template>
+  <span
+    :class="[
+      'inline-flex flex-col items-center whitespace-nowrap uppercase leading-none',
+      gapClasses[props.size],
+    ]"
+    aria-label="Earth Walker Design"
+  >
+    <span :class="['font-serif font-semibold', earthClasses[props.size]]">
+      Earth Walker
+    </span>
+    <span :class="['font-serif font-light opacity-90', designClasses[props.size]]">
+      Design
+    </span>
+  </span>
+</template>

src/views/HomeView.vue

@@ -4,6 +4,7 @@ import { RouterLink } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { AspectRatio } from '@/components/ui/aspect-ratio'
 import { Button } from '@/components/ui/button'
+import Wordmark from '@/components/layout/Wordmark.vue'
 import { projects } from '@/data/projects'
 
 const { t } = useI18n({ useScope: 'global' })
@@ -34,11 +35,9 @@ const projectCards = computed(() =>
       <div
         class="absolute right-0 bottom-14 left-0 mx-auto max-w-[1400px] px-6 text-white md:bottom-20 md:px-10"
       >
-        <p class="text-xs uppercase tracking-[0.22em] text-white/80">
+        <Wordmark size="lg" class="text-white/95" />
-          {{ t('home.hero.eyebrow') }}
-        </p>
         <h1
-          class="mt-4 max-w-3xl font-serif text-4xl font-light leading-[1.05] tracking-tight md:text-6xl lg:text-7xl"
+          class="mt-6 max-w-3xl font-serif text-4xl font-light leading-[1.05] tracking-tight md:text-6xl lg:text-7xl"
         >
           {{ t('home.hero.headline') }}<br />{{ t('home.hero.headline2') }}
         </h1>