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

1 files changed, 3 insertions, 1 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