From 255ed76bbd5fe346c82fe2fc7284b799d0a83e84 Mon Sep 17 00:00:00 2001
From: Jonathan Hvid <joh@fenja.ai>
Date: Tue, 12 May 2026 11:31:56 +0200
Subject: [PATCH] style(nav): align Fenja logo + 'Project Bifrost' on a shared
 baseline
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three small adjustments so the lockup reads as one mark, not a logo
next to a label:

- align-items: baseline on .wordmark-link so the typographic baseline
  drives vertical alignment (instead of bounding-box centres).
- 'Project' + 'Bifrost' bumped from text-body-md (16px) to 18px with
  line-height: 1 and tracking-snug. The bigger weight matches the
  visible glyph height of the Fenja SVG and pulls the bullet into
  conversation with the wordmark instead of floating between them.
- The Fenja SVG gets a translateY(3px) nudge to compensate for the
  descender slack in its 265×101 viewBox — the SVG's actual baseline
  sits a couple of px above its bounding-box bottom, so the flex
  baseline-align would otherwise place 'fenja' above the text baseline.
- The '·' separator drops 1px and grows to 18px so it sits between the
  two marks rather than floating above them.

The exact numbers are empirical — eyeballed in dev — but the rationale
each pin to a baseline relationship rather than 'magic px offset'.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/layouts/AppLayout.astro | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/layouts/AppLayout.astro b/src/layouts/AppLayout.astro
index e8dcb63..1ed27db 100644
--- a/src/layouts/AppLayout.astro
+++ b/src/layouts/AppLayout.astro
@@ -110,8 +110,8 @@ const year = new Date().getFullYear();
   .wordmark-link {
     flex-shrink: 0;
     display: flex;
-    align-items: center;
-    gap: var(--space-3);
+    align-items: baseline;
+    gap: 14px;
     border-bottom: none;
     color: var(--on-surface);
   }
@@ -119,22 +119,29 @@ const year = new Date().getFullYear();
     border-bottom: none;
     color: var(--on-surface);
   }
+  /* Fenja logo's viewBox (265×101) puts its baseline ~3-4px above the
+     bottom edge to leave room for the 'j' descender. Pull the bottom of
+     the SVG down so the typographic baseline matches the wordmark text. */
   .wordmark {
     height: 22px;
     width: auto;
     display: block;
+    transform: translateY(3px);
   }
   .wordmark-sep {
     color: var(--on-surface-muted);
-    font-size: 1rem;
+    font-family: var(--font-serif);
+    font-size: 18px;
     line-height: 1;
+    transform: translateY(-1px);
   }
   .wordmark-project {
     font-family: var(--font-serif);
-    font-size: var(--text-body-md);
+    font-size: 18px;
     font-weight: 400;
+    line-height: 1;
     color: var(--on-surface);
-    letter-spacing: 0;
+    letter-spacing: var(--tracking-snug);
   }
   .wordmark-bifrost {
     font-family: var(--font-serif);