feat: content-UX — header search, metadata de-noise, icon/microcopy coherence, article composition

DESIGN.md

@@ -123,6 +123,79 @@ is untouched; the TOC works fully without JS. Same precedent covers the search
 `<mark>` term highlight (Cherenkov tint) and the `.pagination` pill nav
 (Galaxy pill = current page, 44px targets).
 
+## Header search & one-row width math
+
+Search lives in the header. Desktop (≥1025px): compact GET-form pill (flex
+130–180px) in the utility cluster; suggestions reuse `.suggest`. ≤1024px: a
+44px magnifier `<details>` reveals a full-width search row under the header
+(visible search beats search buried in a menu — NN/g mobile search). Both
+forms are plain `GET /search` (full no-JS path); `<details name="header-panel">`
+makes search + menu a native exclusive pair (no JS). The `/search` page stays
+the full-results and deep-link target.
+
+Nav content rule: the header nav reflects end-user tasks only (NN/g —
+navigation mirrors user goals, not org tooling). The content editor is
+internal-team tooling (SPEC §3.2), so it lives as a discreet "Content editor"
+utility link in the footer, pointed to by the demo note; /admin keeps working
+as the direct URL.
+
+One-row invariant: `.nav > *` is `flex: none`; only the spacer and the search
+field flex, so the row can never wrap or overflow. Tier math (Inter widths
+estimated ±8%; logo 153:32 → 124px at 26px height; inner width = viewport −
+2×gutter, container caps at 1120):
+
+| Tier | Budget | Available |
+|---|---|---|
+| ≥1100 | brand+sub 247 + nav 415 + search 186 + Sign in 91 + gaps 16 ≈ 955 | 1044 @1100 |
+| 1025–1099 (sub-brand hidden) | ≈ 842 | 969 @1025 |
+| 481–1024 (menu + magnifier) | brand 134 + magnifier 44 + Sign in 91 + Menu 92 + gaps 16 ≈ 377 | 445 @481 |
+| ≤480 (logo 22px, icon-only menu) | ≈ 312 | 339 @375 |
+| ≤360 (compact paddings, gap 2) | ≈ 277 | 292 @320 |
+
+The search field's 50px shrink range (180 → 130) absorbs estimate error in
+every tier. No focus-grow on the field: a width transition would be a layout
+animation (motion policy allows transform/opacity only) and an unanimated
+snap is worse than a calm fixed width.
+
+## Content & microcopy
+
+- Card metadata must differentiate (NN/g: omit non-differentiating metadata):
+  category and author are identical on all articles, so cards show
+  date · reading time (body words ÷ 220 wpm, computed at build). Category and
+  author remain on the article page; meta order there is
+  category · author · date · read time.
+- Badges: "Mock — <what's missing>" (bare "Mock" only on tiles); "External —
+  <team>"; "Planned — not yet available". Mock badges are never removed.
+- Terminology is fixed: "Sign in" (never Log in), "Editor", "Search", "News".
+  Buttons start with a verb, sentence case. Real ellipsis (…), never "...".
+- Search links (`.suggest a`, `.search-results a`) lay out as flowing text —
+  never `display: flex` on the `<a>` itself: `<mark>` term-highlight splits the
+  title into fragments, and flex would turn each into its own item.
+- Overflow containment happens at the source: wide `.prose` tables scroll in
+  their own box, long words/URLs wrap via `overflow-wrap`. The
+  `html, body { overflow-x: clip }` rule is a regression guard, not a fix —
+  never rely on it for new components.
+- Articles end with `.post-nav` (Newer ← → Older from the date-sorted
+  collection). Image captions: italic line under the image
+  (`.prose img + em` / `p > em:only-child`), muted and smaller.
+
+### Element rules (condensed)
+
+| Element | Rule | Source |
+|---|---|---|
+| Phase banner | THE one loud demo disclosure: Moon bar above header, "Demo" tag + one sentence | GOV.UK phase banner |
+| Header nav | End-user tasks only; order News · Data · Proposals · Dashboard · Support (entry first, help last, personal area next to Sign in) | NN/g serial-position |
+| Header search | Compact field ≥1025px, magnifier reveal ≤1024px; both plain GET /search | NN/g site search |
+| Hero (home) | Headline + brand subtitle + two task CTAs (Cherenkov primary, ghost secondary) + one-line Latest teaser. Never a second search box; no fake live widgets | hero-CTA convention, one-search-location |
+| Badges | Quiet hairline pill, muted sentence-case text, Galaxy dot on mocks; "Mock — reason"; never removed | REQUIREMENTS §5, NN/g hierarchy |
+| Cards | Cover · title (clamp 3) · desc (clamp 2) · date · read time; no non-differentiating metadata | NN/g metadata |
+| Pagination | Newer/Older + windowed numbers, 44px targets, aria-current | NN/g pagination |
+| Article | Back "← All news"; meta category · author · date · read time; italic muted captions; TOC at ≥3 headings; post-nav | editorial convention |
+| Forms | Visible labels above fields; placeholders are examples only; buttons start with a verb | GOV.UK forms, NN/g |
+| Login | One line + button + one small-print line; no reassurance prose | auth brevity |
+| Footer | Identity line → Contact · Search · Disclaimer · Privacy · Site settings · Content editor → © line; no implementation talk in UI copy | NN/g footers |
+| Search results | Links lay out as flowing text (mark-safe); date chip; "Press Enter for all results" hint | — |
+
 ## Do not
 
 - No new hues, tints, or grays — derive via `color-mix` from brand tokens only.