From 80e926eb98c0879767abcadd6919f74f373690bf Mon Sep 17 00:00:00 2001
From: fbarez <fazlbarez93@gmail.com>
Date: Fri, 6 Nov 2026 18:31:18 +0000
Subject: [PATCH] Header: fit the tabs on one line

With Fragment Mono the site title was ~620px wide and the tabs wrapped onto a second row. The title is now .9rem with the header letter-spacing, and 'for AI Safety' sits on a second line (~335px). Tab labels no longer break mid-label ('Safety & open problems'). Measured in Chromium: tabs fit on one line from 1280px wide.
---
 src/layouts/Base.astro | 2 +-
 src/styles/global.css  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index 0cbb14edea..5bc802bb3f 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -50,7 +50,7 @@ const robotsNoindex = Astro.props.noindex || (Astro.props.manuscript && isDraft
   <a class="skip" href="#main">Skip to content</a>
   <header class="site-header">
     <div class="inner">
-      <a class="brand" href={base}>The State of Mechanistic Interpretability <em>for AI Safety</em></a>
+      <a class="brand" href={base}>The State of Mechanistic Interpretability<br class="brand-br" /> <em>for AI Safety</em></a>
       <button class="icon-btn menu-btn" aria-expanded="false" aria-controls="site-nav" id="menu-btn">Menu</button>
       <nav class="site-nav" id="site-nav" aria-label="Main">
         {NAV.filter((n) => !(draftHidden && n.draft)).map((n) => <a href={url(n.href)} aria-current={path.startsWith(url(n.href)) ? 'page' : undefined}>{n.label}</a>)}
diff --git a/src/styles/global.css b/src/styles/global.css
index c0dbace9be..62d531d16a 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -81,12 +81,12 @@ button { font: inherit; color: inherit; }
 /* ---------- masthead ---------- */
 .site-header { border-bottom: 1px solid var(--hair); background: var(--paper); }
 .site-header .inner { max-width: 82rem; margin: 0 auto; display: flex; align-items: baseline; gap: 2rem; padding: 1rem 1.25rem .9rem; }
-.brand { font-family: var(--display); font-size: 1.15rem; color: var(--ink); text-decoration: none; white-space: nowrap; letter-spacing: -0.005em; }
+.brand { font-family: var(--display); font-size: .9rem; line-height: 1.2; color: var(--ink); text-decoration: none; white-space: nowrap; letter-spacing: -0.05em; }
 .brand:hover { color: var(--ink); }
 @media (max-width: 40rem) { .brand { white-space: normal; font-size: 1.02rem; line-height: 1.25; min-width: 0; } }
 .brand em { font-style: italic; }
 .site-nav { display: flex; gap: 1.4rem; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
-.site-nav a { color: var(--ink-2); text-decoration: none; font-size: .9rem; }
+.site-nav a { color: var(--ink-2); text-decoration: none; font-size: .9rem; white-space: nowrap; }
 .site-nav a:hover { color: var(--ink); text-decoration: underline; }
 .site-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
 .icon-btn { background: none; border: 0; padding: 0; color: var(--ink-3); cursor: pointer; font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hair); }