Keep the header rule on phonesHEADmaster

The rule beside the title or logo was hidden under 700px so a long
title could wrap, which left a small logo alone with empty space either
side. The row is a flexbox on phones now: the brand wraps only when it
must and the rules fill whatever is left, so a short title or a logo
keeps its rule and a long title still wraps a word at a time and takes
the whole row. Browsers without flexbox keep the table with a wrapping
brand. A spread menu's links no longer justify their own words when one
wraps inside.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Sd8UPWrvyYCLj97JexNw3A

2 files changed, 13 insertions, 4 deletions

diff --git a/AGENTS.md b/AGENTS.md
index 51c879d..ac79d83 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -230,7 +230,9 @@ internal/web/         server.go (host router, middleware, render helpers)
   `ruled rule-<kind>` classes on the block, the `rule` template adds the
   `.header-rule` cells and blog.css draws them — table cells (so the rule is
   as tall as the brand and old browsers agree) in `currentColor`, i.e. the
-  header text colour; hidden on phones so a long title can wrap. The menu
+  header text colour. On phones the row is a flexbox instead (a table would
+  wrap a long title one word per line): the brand wraps only when it must and
+  the rules take what is left, nothing when the title needs the whole width. The menu
   links' look is switches that combine — `NavBold`, `NavUpper`, `NavUnderline`
   (`hover` | `never` | `always`), `NavSize`, `NavGap`, `NavActive` (how the
   current page's link is marked: `underline` | `bold` | `box` | `none`) and
diff --git a/internal/web/static/blog.css b/internal/web/static/blog.css
index 7b91dbe..1c66c6e 100644
--- a/internal/web/static/blog.css
+++ b/internal/web/static/blog.css
@@ -10,7 +10,8 @@ img { max-width: 100%; height: auto; }
 /* header rule: a line beside the title or logo (both sides when centred) filling
    the rest of the row. Table cells, so the rule is as tall as the brand and old
    browsers lay it out the same; the stripes are a gradient in currentColor (the
-   header text colour). Wide screens only: on a phone a long title must wrap. */
+   header text colour). On phones the row is a flexbox instead (see the media
+   query): a long title must wrap, which a table would do one word per line. */
 .ruled { display: table; width: 100%; }
 .ruled > .brand, .ruled > .header-rule { display: table-cell; vertical-align: middle; }
 .ruled > .brand { white-space: nowrap; padding: 0 1em; }
@@ -47,7 +48,7 @@ img { max-width: 100%; height: auto; }
    that forced line from adding height, the links carry their own. A floated
    search box just shortens the line. */
 .nav-spread .site-header .nav-inner { text-align: justify; line-height: 0; }
-.nav-spread .site-header .nav-inner > a, .nav-spread .site-header .search-form { line-height: 1.5; }
+.nav-spread .site-header .nav-inner > a, .nav-spread .site-header .search-form { line-height: 1.5; text-align: left; } /* a link that wraps inside is not justified word by word */
 .nav-spread .site-header .nav-inner::after { content: ""; display: inline-block; width: 100%; }
 .body-wrap { padding: 1.5em 1em; }
 .content { padding: 1.5em 2em; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
@@ -178,7 +179,13 @@ img { max-width: 100%; height: auto; }
   .content { padding: 1em; }
   .post-thumb { width: 40%; margin-left: 1em; }
   .site-title { font-size: 1.5em; }
-  .ruled > .header-rule { display: none; } .ruled > .brand { white-space: normal; }
+  /* the header rule keeps filling the row; the brand wraps only when it must
+     (min-content), and the rules take what is left. The rule is a column so
+     its line sits in the middle; the stripes are its whole height, as in the
+     table. Browsers without flexbox keep the table with a wrapping brand. */
+  .ruled { display: flex; }
+  .ruled > .brand { display: block; flex: 0 1 auto; white-space: normal; }
+  .ruled > .header-rule { display: flex; flex-direction: column; justify-content: center; flex: 1 1 0; }
   .cols { display: block; }
   .col-left, .col-right { padding: 0; margin-top: 1.5em; }
   .col-left { order: 0; }