Fold the header menu into a button when its links do not fit

A long menu wrapped onto two or three lines on phones and narrow
windows. With the new Design switch the header menu folds into a ☰
button (an icon, the word Menu, or both) carried by the title or logo
block just above it, at the right end of its row, or by the menu bar
when nothing is above it; the button opens the links as a stacked list
with the search box on top.

The open/closed state is a hidden checkbox and the button its label,
so opening needs no script and works in old browsers. Whether to fold
is decided by a small inline script — any link on a second line means
the menu does not fit — re-checked on resize; without it blog.css folds
on phones only, and browsers too old for that keep the wrapping menu.

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

1 files changed, 2 insertions, 1 deletions

diff --git a/README.md b/README.md
index ebb1a4d..7358e8d 100644
--- a/README.md
+++ b/README.md
@@ -38,7 +38,8 @@ Server-rendered HTML, no JavaScript required, works on old browsers and phones.
   row beside the title or logo. The **menu** mixes blog pages and outside links; its
   links can be bold, uppercase, underlined always, on hover or never, small or large,
   tight or wide apart, in any combination; the current page's link is underlined, bold,
-  boxed or left alone, and the header menu sits left, centred, right or spread across the bar. Posts per
+  boxed or left alone, and the header menu sits left, centred, right or spread across the bar —
+  or folds into a ☰ button (beside the title or logo above it) when its links do not fit. Posts per
   page, the date format, the site title size and the footer alignment live here too,
   as does whether listings show whole posts or **summaries** with a "Read more" link
   (a post's summary ends at a `<!--more-->` line, or after its first paragraphs).