refactor: stacked wordmark — EARTH WALKER over DESIGN, no frame

Drops the rectangular border treatment and the mobile/desktop split.
Wordmark is now a single stacked column at every breakpoint: EARTH
WALKER set in serif semibold on top, DESIGN tucked underneath in
serif light with wider tracking and reduced size, centered.

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 md / lg breakpoints. Whitespace-nowrap holds the
shape together regardless of container width.

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

src/components/layout/SiteHeader.vue

@@ -33,15 +33,10 @@ const mobileOpen = ref(false)
     >
       <RouterLink
         to="/"
-        class="text-foreground"
+        class="text-foreground inline-flex items-center"
         :aria-label="t('brand')"
       >
-        <span
+        <Wordmark size="sm" />
-          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">

src/components/layout/Wordmark.vue

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

src/views/HomeView.vue

@@ -35,7 +35,7 @@ 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"
       >
-        <Wordmark size="md" class="text-white/95" />
+        <Wordmark size="lg" class="text-white/95" />
         <h1
           class="mt-6 max-w-3xl font-serif text-4xl font-light leading-[1.05] tracking-tight md:text-6xl lg:text-7xl"
         >