visuals: technology marks, area icons, client wall, two diagrams

Phase 7 (AUD-149), cheapest first.

- internal/brand: vendored Simple Icons path data (CC0) for 50 marks, looked up
  by the technology label the content already uses. Inline SVG, 16 px,
  currentColor, no request and no font. tools/gen_brand_icons.sh regenerates it.
- Six hand-drawn area icons replace the two-letter badges in the nav and on the
  landing cards; the evidence index gets a seventh.
- TechChips renders a mark where one exists and plain text where one does not,
  so a missing icon reads as a decision rather than a broken image.
- Client wall: 45 names as one typeface, one size, one grid of equal tiles, and
  the reason for no logo collage written on the page. No mark invented.
- Two diagrams, authored in-repo: homelab topology (platform-network.md) and
  the RAG pipeline (ai-rag-corpus.md), each referenced from the page it explains.
- Content images now carry intrinsic width/height, loading="lazy" and
  decoding="async" at render time; a site test fails the build if an image
  ships without them.
- Topbar is two rows at desktop: the area names plus marks no longer overlap the
  search form (Lighthouse target-size was failing at 1440 px).
- Favicon, so the browser stops requesting a missing /favicon.ico.

Satisfies: logos on every area page, area icons in nav and cards, two diagrams
referenced from their pages, images sized and lazy, Lighthouse >= 95 held.

(cherry picked from commit a473e4738a3751418c2097df2bcf0568fb6d0208)

internal/web/static/site.css

@@ -151,13 +151,22 @@ samp {
 
 /* ---- chrome ------------------------------------------------------------ */
 
+/*
+   Two rows: the name and the search on the first, the six areas plus the index
+   on the second. The area names are long and the marks made them longer, so a
+   single row either overlapped the search form or scrolled the nav out of
+   reach. Two rows give every link a real target at every width.
+*/
 .topbar {
 	position: sticky;
 	top: 0;
 	z-index: 20;
 	display: grid;
-	grid-template-columns: var(--nav-w) minmax(0, 1fr) auto;
-	gap: var(--pad);
+	grid-template-columns: var(--nav-w) minmax(0, 1fr);
+	grid-template-areas:
+		"brand search"
+		"nav nav";
+	gap: 0.5rem var(--pad);
 	align-items: center;
 	padding: 0.7rem var(--pad);
 	background: color-mix(in srgb, var(--bg) 92%, transparent);
@@ -165,6 +174,21 @@ samp {
 	border-bottom: 1px solid var(--line);
 }
 
+.brand {
+	grid-area: brand;
+}
+
+.nav-search {
+	grid-area: search;
+	justify-self: end;
+	width: min(28rem, 100%);
+}
+
+.nav-rail {
+	grid-area: nav;
+	min-width: 0;
+}
+
 .brand {
 	display: flex;
 	align-items: center;
@@ -241,17 +265,25 @@ samp {
 	box-shadow: inset 0 -2px 0 var(--accent);
 }
 
-.nav-gutter {
-	font-family: var(--font-mono);
-	font-size: 0.68rem;
-	letter-spacing: 0.08em;
+/* The area mark replaces the old two-letter badge. It is decoration; the nav
+   label beside it is the accessible name. */
+.nav-mark {
+	display: inline-flex;
+	align-items: center;
 	color: var(--text-muted);
 }
 
-.nav-current .nav-gutter {
+.nav-link:hover .nav-mark,
+.nav-current .nav-mark {
 	color: var(--accent);
 }
 
+.area-icon {
+	display: block;
+	width: 20px;
+	height: 20px;
+}
+
 /* ---- shell ------------------------------------------------------------- */
 
 .shell {
@@ -564,8 +596,9 @@ samp {
 	color: var(--text-muted);
 }
 
-.pillar-gutter {
-	font-family: var(--font-mono);
+.pillar-mark {
+	display: inline-flex;
+	align-items: center;
 	color: var(--accent);
 }
 
@@ -600,6 +633,11 @@ samp {
 	color: var(--text-muted);
 }
 
+.pillar-go {
+	font-weight: 600;
+	border-bottom: 0;
+}
+
 .pillar-count {
 	font-family: var(--font-mono);
 	font-size: 0.74rem;
@@ -644,8 +682,11 @@ samp {
 	list-style: none;
 }
 
-.tech li {
-	padding: 0.12rem 0.45rem;
+.tech-chip {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.35rem;
+	padding: 0.14rem 0.45rem;
 	border: 1px solid var(--line);
 	border-radius: var(--radius-sm);
 	font-family: var(--font-mono);
@@ -653,6 +694,67 @@ samp {
 	color: var(--text-dim);
 }
 
+/* Monochrome and currentColor, so the chip and the mark share one colour and
+   no icon ever adds a request. */
+.tech-mark {
+	display: block;
+	flex: none;
+	width: 16px;
+	height: 16px;
+	fill: currentColor;
+	opacity: 0.85;
+}
+
+.tech-chip:hover {
+	border-color: var(--line-strong);
+	color: var(--text);
+}
+
+.tech-chip:hover .tech-mark {
+	opacity: 1;
+}
+
+/* ---- client wall ------------------------------------------------------- */
+/*
+   One typeface, one size, one tile. Mixed brand marks would read as broken;
+   a consistent grid reads as deliberate. Tiles are the same height whatever
+   the length of the name, so the wall never looks like a failed image load.
+*/
+.client-wall {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
+	gap: 1px;
+	margin: 1rem 0 1.6rem;
+	padding: 1px;
+	background: var(--line);
+	border: 1px solid var(--line);
+	border-radius: var(--radius-sm);
+	overflow: hidden;
+	list-style: none;
+}
+
+.client-tile {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-height: 4.2rem;
+	padding: 0.6rem 0.75rem;
+	background: var(--surface);
+	text-align: center;
+}
+
+.client-name {
+	font-size: 0.88rem;
+	line-height: 1.25;
+	letter-spacing: 0.01em;
+	color: var(--text-dim);
+	text-wrap: balance;
+}
+
+.client-tile:hover .client-name {
+	color: var(--text);
+}
+
 .doc-head {
 	padding-bottom: 1.1rem;
 	border-bottom: 1px solid var(--line);