From 576b8559d79983d3d00396bb4c29c70c7328891b Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Wed, 27 May 2026 12:25:01 +0200
Subject: [PATCH 1/6] feat: framed EARTH WALKER / DESIGN wordmark, themed via
 currentColor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Carries forward the original site's wordmark — heavier "EARTH WALKER"
paired with lighter "DESIGN", contained in a thin rectangular frame —
adapted to our type system (Fraunces semibold + light) rather than
re-importing the original slab serif. Because everything is rendered
in currentColor, the frame and both words invert automatically against
the dark hero overlay, the dark theme, and any of the four palettes.

Wordmark.vue takes a size prop ('sm' | 'md' | 'lg') driving type
scale, frame padding, and letter-spacing. Replaces the plain-text
brand in:
  - SiteHeader logo slot (sm)
  - Mobile Sheet drawer header (sm)
  - SiteFooter brand block (sm)
  - HomeView hero overlay above the headline (md)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/layout/SiteFooter.vue |  5 +--
 src/components/layout/SiteHeader.vue | 11 ++++---
 src/components/layout/Wordmark.vue   | 46 ++++++++++++++++++++++++++++
 src/views/HomeView.vue               |  7 ++---
 4 files changed, 58 insertions(+), 11 deletions(-)
 create mode 100644 src/components/layout/Wordmark.vue

diff --git a/src/components/layout/SiteFooter.vue b/src/components/layout/SiteFooter.vue
index e6036e1..e6f3912 100644
--- a/src/components/layout/SiteFooter.vue
+++ b/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">
-        <p class="font-serif text-base tracking-[0.18em] uppercase">{{ t('brand') }}</p>
+      <div class="space-y-3">
+        <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">
diff --git a/src/components/layout/SiteHeader.vue b/src/components/layout/SiteHeader.vue
index 88c1011..4a546fa 100644
--- a/src/components/layout/SiteHeader.vue
+++ b/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"
+        :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">
-                {{ t('brand') }}
-              </SheetTitle>
+              <SheetTitle class="sr-only">{{ t('brand') }}</SheetTitle>
+              <Wordmark size="sm" class="text-foreground" />
             </SheetHeader>
             <nav class="mt-10 flex flex-col gap-6 px-4">
               <RouterLink
diff --git a/src/components/layout/Wordmark.vue b/src/components/layout/Wordmark.vue
new file mode 100644
index 0000000..cd5b59b
--- /dev/null
+++ b/src/components/layout/Wordmark.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+type Size = 'sm' | 'md' | 'lg'
+
+const props = withDefaults(
+  defineProps<{
+    /** Visual size — controls type scale + frame padding. */
+    size?: Size
+  }>(),
+  { size: 'md' },
+)
+
+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]',
+  md: 'text-sm tracking-[0.32em] md:text-base',
+  lg: 'text-base tracking-[0.34em] md:text-xl',
+}
+
+const designClasses: Record<Size, string> = {
+  sm: 'text-[0.55rem] tracking-[0.28em]',
+  md: 'text-[0.7rem] tracking-[0.32em] md:text-xs',
+  lg: 'text-xs tracking-[0.34em] md:text-sm',
+}
+</script>
+
+<template>
+  <span
+    :class="[
+      'inline-flex items-baseline border border-current uppercase',
+      frameClasses[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>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index f8fe19f..670a448 100644
--- a/src/views/HomeView.vue
+++ b/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">
-          {{ t('home.hero.eyebrow') }}
-        </p>
+        <Wordmark size="md" class="text-white/95" />
         <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>

From 94c8bfaa0ae8dfba59368d042bf10ce8019c07be Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Wed, 27 May 2026 12:28:15 +0200
Subject: [PATCH 2/6] fix: keep wordmark from wrapping on narrow viewports
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two changes:
- Wordmark.vue now forces whitespace-nowrap on the outer frame and
  both inner spans, plus flex-nowrap on the row, so EARTH WALKER and
  DESIGN can never wrap inside the box regardless of the parent's
  width constraints.
- SiteHeader swaps to a plain serif "Earth Walker" wordmark below
  md: — at the actual mobile header width (viewport minus locale +
  theme + hamburger icons) the boxed mark would crowd to the point of
  illegibility even without wrapping. Full boxed Wordmark stays in
  the hero, the footer, and the mobile drawer where there's room.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/layout/SiteHeader.vue |  7 ++++++-
 src/components/layout/Wordmark.vue   | 16 +++++++++++++---
 2 files changed, 19 insertions(+), 4 deletions(-)

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>

From d84a0a3bedb92c74ed6c41c801be256b024b70ce Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Wed, 27 May 2026 12:37:53 +0200
Subject: [PATCH 3/6] =?UTF-8?q?refactor:=20stacked=20wordmark=20=E2=80=94?=
 =?UTF-8?q?=20EARTH=20WALKER=20over=20DESIGN,=20no=20frame?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 |  9 ++----
 src/components/layout/Wordmark.vue   | 45 ++++++++++------------------
 src/views/HomeView.vue               |  2 +-
 3 files changed, 19 insertions(+), 37 deletions(-)

diff --git a/src/components/layout/SiteHeader.vue b/src/components/layout/SiteHeader.vue
index 354ba25..ee1f82f 100644
--- a/src/components/layout/SiteHeader.vue
+++ b/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
-          class="font-serif text-sm font-semibold uppercase tracking-[0.22em] md:hidden"
-        >
-          Earth Walker
-        </span>
-        <Wordmark size="sm" class="hidden md:inline-flex" />
+        <Wordmark size="sm" />
       </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 e325f27..73226bd 100644
--- a/src/components/layout/Wordmark.vue
+++ b/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]',
-  md: 'text-sm tracking-[0.32em] md:text-base',
-  lg: 'text-base tracking-[0.34em] md:text-xl',
+  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.28em]',
-  md: 'text-[0.7rem] tracking-[0.32em] md:text-xs',
-  lg: 'text-xs tracking-[0.34em] md:text-sm',
+  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-nowrap items-baseline whitespace-nowrap border border-current uppercase',
-      frameClasses[props.size],
+      'inline-flex flex-col items-center whitespace-nowrap uppercase leading-none',
+      gapClasses[props.size],
     ]"
     aria-label="Earth Walker Design"
   >
-    <span
-      :class="[
-        'whitespace-nowrap font-serif font-semibold',
-        earthClasses[props.size],
-      ]"
-    >
+    <span :class="['font-serif font-semibold', earthClasses[props.size]]">
       Earth Walker
     </span>
-    <span
-      :class="[
-        'whitespace-nowrap font-serif font-light opacity-90',
-        designClasses[props.size],
-      ]"
-    >
+    <span :class="['font-serif font-light opacity-90', designClasses[props.size]]">
       Design
     </span>
   </span>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 670a448..f9929d6 100644
--- a/src/views/HomeView.vue
+++ b/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"
         >

From f2baa39b090ec3ca7e1f28d541d2f6f8d5495df3 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Wed, 27 May 2026 12:42:58 +0200
Subject: [PATCH 4/6] copy: drop redundant "Recent work." H2 on the home
 selected section
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The eyebrow already labels the section "Selected work" — repeating
the same idea as a large H2 underneath ("Recent work.") was
redundant and gave the strip more vertical chrome than it needed.
Section now reads as a single quiet label next to the View-all
link, with the project cards doing the actual work. Removes the
unused home.selected.headline key from all three locales.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/i18n/locales/en.json |  3 +--
 src/i18n/locales/es.json |  3 +--
 src/i18n/locales/fr.json |  3 +--
 src/views/HomeView.vue   | 13 +++----------
 4 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index ff45632..6b8b340 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -26,8 +26,7 @@
       "body": "The studio works closely with a small number of homes each year, slowly and intentionally — letting the architecture, the light, and the people who live there set the brief."
     },
     "selected": {
-      "eyebrow": "Selected work",
-      "headline": "Recent work."
+      "eyebrow": "Selected work"
     },
     "cta": {
       "eyebrow": "Inquiries",
diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json
index f18c7ae..c136d66 100644
--- a/src/i18n/locales/es.json
+++ b/src/i18n/locales/es.json
@@ -26,8 +26,7 @@
       "body": "El estudio trabaja de cerca con un pequeño número de hogares cada año, despacio y con intención — dejando que la arquitectura, la luz y las personas que viven allí marquen el rumbo."
     },
     "selected": {
-      "eyebrow": "Obra seleccionada",
-      "headline": "Proyectos recientes."
+      "eyebrow": "Obra seleccionada"
     },
     "cta": {
       "eyebrow": "Consultas",
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
index d539f9e..9060f46 100644
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@@ -26,8 +26,7 @@
       "body": "Le studio accompagne chaque année quelques maisons, lentement et avec intention — en laissant l'architecture, la lumière, et les personnes qui y vivent guider la démarche."
     },
     "selected": {
-      "eyebrow": "Œuvre sélectionnée",
-      "headline": "Projets récents."
+      "eyebrow": "Œuvre sélectionnée"
     },
     "cta": {
       "eyebrow": "Demandes",
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index f9929d6..dd4a22b 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -62,15 +62,8 @@ const projectCards = computed(() =>
     <!-- Projects teaser -->
     <section class="border-border/60 border-t px-6 py-20 md:px-10 md:py-28">
       <div class="mx-auto max-w-[1400px]">
-        <div class="flex items-baseline justify-between">
-          <div>
-            <p class="eyebrow">{{ t('home.selected.eyebrow') }}</p>
-            <h2
-              class="mt-3 font-serif text-3xl font-light tracking-tight md:text-5xl"
-            >
-              {{ t('home.selected.headline') }}
-            </h2>
-          </div>
+        <div class="flex items-center justify-between">
+          <p class="eyebrow">{{ t('home.selected.eyebrow') }}</p>
           <RouterLink
             to="/portfolio"
             class="text-foreground/70 hover:text-foreground hidden text-xs uppercase tracking-[0.22em] transition-colors md:inline-flex"
@@ -79,7 +72,7 @@ const projectCards = computed(() =>
           </RouterLink>
         </div>
 
-        <div class="mt-12 grid gap-10 md:grid-cols-2 md:gap-14">
+        <div class="mt-10 grid gap-10 md:grid-cols-2 md:gap-14">
           <RouterLink
             v-for="project in projectCards"
             :key="project.slug"

From c44ed31cdd93188984fdc168950ac4ce6cf1dfd9 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Wed, 27 May 2026 12:25:01 +0200
Subject: [PATCH 5/6] feat: stacked EARTH WALKER / DESIGN wordmark
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 |  5 ++--
 src/components/layout/SiteHeader.vue | 11 +++----
 src/components/layout/Wordmark.vue   | 43 ++++++++++++++++++++++++++++
 src/views/HomeView.vue               |  7 ++---
 4 files changed, 55 insertions(+), 11 deletions(-)
 create mode 100644 src/components/layout/Wordmark.vue

diff --git a/src/components/layout/SiteFooter.vue b/src/components/layout/SiteFooter.vue
index e6036e1..e6f3912 100644
--- a/src/components/layout/SiteFooter.vue
+++ b/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">
-        <p class="font-serif text-base tracking-[0.18em] uppercase">{{ t('brand') }}</p>
+      <div class="space-y-3">
+        <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">
diff --git a/src/components/layout/SiteHeader.vue b/src/components/layout/SiteHeader.vue
index 88c1011..ee1f82f 100644
--- a/src/components/layout/SiteHeader.vue
+++ b/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">
-                {{ t('brand') }}
-              </SheetTitle>
+              <SheetTitle class="sr-only">{{ t('brand') }}</SheetTitle>
+              <Wordmark size="sm" class="text-foreground" />
             </SheetHeader>
             <nav class="mt-10 flex flex-col gap-6 px-4">
               <RouterLink
diff --git a/src/components/layout/Wordmark.vue b/src/components/layout/Wordmark.vue
new file mode 100644
index 0000000..73226bd
--- /dev/null
+++ b/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>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index f8fe19f..f9929d6 100644
--- a/src/views/HomeView.vue
+++ b/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">
-          {{ t('home.hero.eyebrow') }}
-        </p>
+        <Wordmark size="lg" class="text-white/95" />
         <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>

From a26f42fb7930db9dbfdc66e6ddae85f7260b917c Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Wed, 27 May 2026 12:42:58 +0200
Subject: [PATCH 6/6] copy: drop redundant "Recent work." H2 on the home
 selected section
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The eyebrow already labels the section "Selected work" — repeating
the same idea as a large H2 underneath ("Recent work.") was
redundant and gave the strip more vertical chrome than it needed.
Section now reads as a single quiet label next to the View-all
link, with the project cards doing the actual work. Removes the
unused home.selected.headline key from all three locales.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/i18n/locales/en.json |  3 +--
 src/i18n/locales/es.json |  3 +--
 src/i18n/locales/fr.json |  3 +--
 src/views/HomeView.vue   | 13 +++----------
 4 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index ff45632..6b8b340 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -26,8 +26,7 @@
       "body": "The studio works closely with a small number of homes each year, slowly and intentionally — letting the architecture, the light, and the people who live there set the brief."
     },
     "selected": {
-      "eyebrow": "Selected work",
-      "headline": "Recent work."
+      "eyebrow": "Selected work"
     },
     "cta": {
       "eyebrow": "Inquiries",
diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json
index f18c7ae..c136d66 100644
--- a/src/i18n/locales/es.json
+++ b/src/i18n/locales/es.json
@@ -26,8 +26,7 @@
       "body": "El estudio trabaja de cerca con un pequeño número de hogares cada año, despacio y con intención — dejando que la arquitectura, la luz y las personas que viven allí marquen el rumbo."
     },
     "selected": {
-      "eyebrow": "Obra seleccionada",
-      "headline": "Proyectos recientes."
+      "eyebrow": "Obra seleccionada"
     },
     "cta": {
       "eyebrow": "Consultas",
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
index d539f9e..9060f46 100644
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@@ -26,8 +26,7 @@
       "body": "Le studio accompagne chaque année quelques maisons, lentement et avec intention — en laissant l'architecture, la lumière, et les personnes qui y vivent guider la démarche."
     },
     "selected": {
-      "eyebrow": "Œuvre sélectionnée",
-      "headline": "Projets récents."
+      "eyebrow": "Œuvre sélectionnée"
     },
     "cta": {
       "eyebrow": "Demandes",
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index f9929d6..dd4a22b 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -62,15 +62,8 @@ const projectCards = computed(() =>
     <!-- Projects teaser -->
     <section class="border-border/60 border-t px-6 py-20 md:px-10 md:py-28">
       <div class="mx-auto max-w-[1400px]">
-        <div class="flex items-baseline justify-between">
-          <div>
-            <p class="eyebrow">{{ t('home.selected.eyebrow') }}</p>
-            <h2
-              class="mt-3 font-serif text-3xl font-light tracking-tight md:text-5xl"
-            >
-              {{ t('home.selected.headline') }}
-            </h2>
-          </div>
+        <div class="flex items-center justify-between">
+          <p class="eyebrow">{{ t('home.selected.eyebrow') }}</p>
           <RouterLink
             to="/portfolio"
             class="text-foreground/70 hover:text-foreground hidden text-xs uppercase tracking-[0.22em] transition-colors md:inline-flex"
@@ -79,7 +72,7 @@ const projectCards = computed(() =>
           </RouterLink>
         </div>
 
-        <div class="mt-12 grid gap-10 md:grid-cols-2 md:gap-14">
+        <div class="mt-10 grid gap-10 md:grid-cols-2 md:gap-14">
           <RouterLink
             v-for="project in projectCards"
             :key="project.slug"