From a1656751e8751990f4929b6abc55868375fa2294 Mon Sep 17 00:00:00 2001
From: Emi Griffith <me@emigriffith.dev>
Date: Sat, 18 Jul 2026 00:55:43 -0700
Subject: [PATCH] Restore the brand lockup on the homepage (#181)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The homepage header lost its wordmark treatment: the mark baseline-aligned
instead of centring (riding ~8px high) and the wordmark fell back to 20px Inter
regular instead of the 26px monospace used everywhere else.

The lockup is styled by `.brand h1` — an element selector. The homepage renders
the brand as `<p class="site-name">` so its hero headline can own the page's
only h1, so it matched none of it: no flex centring, no gap, no monospace, no
weight. Measured against /about at 393px:

  homepage   <p>   Inter         20px w400  display:block  mark -8.5px
  /about     <h1>  ui-monospace  26px w700  display:flex   mark -1.2px

Match `.brand .site-name` alongside `.brand h1` (and the same for the inner
link and the compact-header size). Both now measure -1.2px, the intended
optical nudge.

Adds a test for the invariant. Nothing else caught this: the page rendered,
every test passed, and only the rendering was wrong — so the test asserts the
lockup rule covers the class the homepage actually uses, and fails if the
selector is narrowed again.
---
 tests/test_homepage.py | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/tests/test_homepage.py b/tests/test_homepage.py
index ec60713..d437651 100644
--- a/tests/test_homepage.py
+++ b/tests/test_homepage.py
@@ -7,6 +7,7 @@ fetching climate helpers are not called at all.
 """
 import datetime
 import json
+import pathlib
 import time
 
 import pytest
@@ -134,6 +135,25 @@ def test_hero_locate_has_a_status_slot(client, no_feed):
     assert 'aria-live="polite"' in html
 
 
+def test_homepage_brand_keeps_the_lockup_styling(client, no_feed):
+    """The homepage renders the brand as <p class="site-name"> so the hero owns
+    the page's only h1. The lockup styling is written against `.brand h1`, so
+    the class MUST be matched there too — otherwise the brand silently falls
+    back to block layout, which baseline-aligns the mark instead of centring it
+    and drops the monospace wordmark. Nothing else catches this: the page still
+    renders, and every other test still passes, while the header looks wrong.
+    """
+    html = client.get(f"{B}/").text
+    assert 'class="site-name"' in html
+    assert "<h1 class=\"site-name\"" not in html      # the hero owns the h1
+
+    css = (pathlib.Path(__file__).parents[2] / "frontend" / "style.css").read_text()
+    lockup = css.split(".brand h1", 1)[1].split("}", 1)[0]
+    assert ".brand .site-name" in lockup, (
+        "the .brand h1 lockup rule must also match .brand .site-name"
+    )
+
+
 def test_city_chips_all_resolve(client, no_feed):
     """Every homepage chip must be a real, routable city — a stale slug would
     render an empty chip list and leak a 404 link."""