From f917e602845c2766309f97e4b662f58c5d9e3e7b Mon Sep 17 00:00:00 2001
From: austin <austin@thebennett.net>
Date: Sun, 26 Jul 2026 20:34:40 -0500
Subject: [PATCH] The wordmark fits a phone instead of breaking on one
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On every phone width the hero lockup was rendering "The" over "Vine", with the branch marks centred
against the two-line block — which is what you were seeing as stacking.

It was not a wrapping bug so much as a sizing one. The lockup is three things that have to stay in
proportion: two fixed-width marks and a tagline that cannot wrap. The hero used one size for phones and
desktops — two 80px marks, a 36px script, and COFFEEHOUSE + BAKERY letterspaced at 0.2em — which comes to
more than a 390px screen has. The only part that could give was the name, so it wrapped.

Both lockups step now. On a phone the hero is 56px marks and a 30px script, full size from sm up; the
bar's is a shade smaller with tighter tracking, because a 320px phone has to fit the lockup and the menu
button. And the name carries whitespace-nowrap: a wordmark does not wrap, whatever else has to give.

Checked at 320, 360 and 390 — one line, marks either side, on all three.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../resources/templates/fragments/lockup.html | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/main/resources/templates/fragments/lockup.html b/src/main/resources/templates/fragments/lockup.html
index 021bb44..7d006fb 100644
--- a/src/main/resources/templates/fragments/lockup.html
+++ b/src/main/resources/templates/fragments/lockup.html
@@ -4,15 +4,20 @@
 <!--/*
   The wordmark: branch · "The Vine" over "Coffeehouse + Bakery" · branch.
 
-  The two branch marks are masks over currentColor (see .mark in tokens.css), so the whole lockup takes
+  The two branch marks are masks over currentColor (see .mark in components.css), so the whole lockup takes
   its colour from the `tint` class the caller passes — sage in the header, cream on the hero and in the
   footer. Branch heights track the two-line wordmark so the marks read as part of it.
+
+  Every size here steps at a breakpoint, because the lockup is three things that have to stay in
+  proportion: two fixed-width marks and a tagline that cannot wrap. Give a phone the desktop sizes and
+  they add up to more than its width, and the only part that CAN give — the name — wraps to two lines with
+  the marks centred against it. Which is what it did.
 */-->
 
 <th:block th:fragment="inner(branch, name, tag)">
   <span th:class="'mark mark-r shrink-0 ' + ${branch}" aria-hidden="true"></span>
   <span class="flex flex-col items-center leading-none min-w-0">
-    <span th:class="'font-lejour ' + ${name}" style="letter-spacing: 0.01em">The Vine</span>
+    <span th:class="'font-lejour whitespace-nowrap ' + ${name}" style="letter-spacing: 0.01em">The Vine</span>
     <span th:class="'font-adbhashitha uppercase mt-1.5 whitespace-nowrap ' + ${tag}">Coffeehouse + Bakery</span>
   </span>
   <span th:class="'mark mark-l shrink-0 ' + ${branch}" aria-hidden="true"></span>
@@ -22,14 +27,20 @@
 <a th:fragment="small(tint)" href="/"
    th:class="'flex items-center gap-1.5 sm:gap-2 min-w-0 shrink ' + ${tint}"
    aria-label="The Vine Coffeehouse + Bakery, home">
-  <th:block th:replace="~{:: inner('w-12 h-12 sm:w-14 sm:h-14', 'text-xl sm:text-2xl xl:text-3xl', 'text-[0.6rem] sm:text-xs tracking-[0.18em]')}"></th:block>
+  <th:block th:replace="~{:: inner(
+      'w-11 h-11 sm:w-14 sm:h-14',
+      'text-xl sm:text-2xl xl:text-3xl',
+      'text-[0.55rem] sm:text-xs tracking-[0.12em] sm:tracking-[0.18em]')}"></th:block>
 </a>
 
 <!--/* The hero, on the homepage — where a link back to "/" would be pointless. */-->
 <div th:fragment="large(tint)"
      th:class="'flex items-center justify-center gap-2 sm:gap-4 min-w-0 shrink ' + ${tint}"
      role="img" aria-label="The Vine Coffeehouse + Bakery">
-  <th:block th:replace="~{:: inner('w-20 h-20 sm:w-28 sm:h-28', 'text-4xl sm:text-5xl md:text-6xl', 'text-xs sm:text-base tracking-[0.2em]')}"></th:block>
+  <th:block th:replace="~{:: inner(
+      'w-14 h-14 sm:w-20 sm:h-20 md:w-28 md:h-28',
+      'text-3xl sm:text-5xl md:text-6xl',
+      'text-[0.6rem] sm:text-base tracking-[0.15em] sm:tracking-[0.2em]')}"></th:block>
 </div>
 </body>
 </html>