From f8ecad44339d17a7a87937cf45770766fb6b3e16 Mon Sep 17 00:00:00 2001
From: Jonathan Hvid <joh@fenja.ai>
Date: Tue, 12 May 2026 11:33:36 +0200
Subject: [PATCH] =?UTF-8?q?style(nav):=20wordmark=20=E2=80=94=20give=20ita?=
 =?UTF-8?q?lic=20ascenders=20room,=20share=20visual=20midline?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two fixes for the previous baseline-align attempt:

- 'Bifrost' was getting its italic ascender clipped because line-height
  was pinned at 1. Switched to line-height: 1.3 on .wordmark-project so
  the swash on the italic 'B' / 'f' has room to render.
- The lockup was reading low overall because align-items: baseline +
  translateY(3px) on the SVG together shifted the SVG below the text
  baseline. Reverted to align-items: center for reliable cross-browser
  centring, dropped the SVG transform, and pulled the SVG height from
  22 → 20 so the visible glyph height of the wordmark matches the cap-
  height of Newsreader at 18px more closely. The '·' bullet keeps a
  -2px nudge because Newsreader's bullet sits typographically above its
  baseline at this size.
- 2px padding-top on .wordmark-project compensates for the small bit
  of descender slack at the bottom of the Fenja SVG — caps now sit on
  the same visible cap-line as the wordmark glyphs.

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

diff --git a/src/layouts/AppLayout.astro b/src/layouts/AppLayout.astro
index 1ed27db..2053828 100644
--- a/src/layouts/AppLayout.astro
+++ b/src/layouts/AppLayout.astro
@@ -110,36 +110,36 @@ const year = new Date().getFullYear();
   .wordmark-link {
     flex-shrink: 0;
     display: flex;
-    align-items: baseline;
-    gap: 14px;
+    align-items: center;
+    gap: 12px;
     border-bottom: none;
     color: var(--on-surface);
+    line-height: 1;       /* belt + braces — no nav-row leading on the lockup */
   }
   .wordmark-link:hover {
     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;
+    height: 20px;
     width: auto;
     display: block;
-    transform: translateY(3px);
   }
   .wordmark-sep {
     color: var(--on-surface-muted);
     font-family: var(--font-serif);
     font-size: 18px;
     line-height: 1;
-    transform: translateY(-1px);
+    /* Optical kern — the bullet's typographic centre sits slightly above
+       its baseline in Newsreader; this nudges it onto the visual midline. */
+    transform: translateY(-2px);
   }
   .wordmark-project {
     font-family: var(--font-serif);
     font-size: 18px;
     font-weight: 400;
-    line-height: 1;
+    line-height: 1.3;        /* leaves room for italic ascenders on 'B'/'f' */
+    padding-top: 2px;        /* matches the descender slack in the Fenja SVG so caps sit on the same visual cap-line */
     color: var(--on-surface);
     letter-spacing: var(--tracking-snug);
   }