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/content/content.go

@@ -37,22 +37,21 @@ type Area struct {
 	Title  string
 	Role   string
 	Blurb  string
-	Gutter string // two-letter mark used by the nav and the stage panel
 }
 
 // Areas is the fixed navigation order from reference/content-map.md.
 var Areas = []Area{
-	{Key: "ai", Title: "AI & Agentic Systems", Role: "AI / LLM Engineer", Gutter: "AI",
+	{Key: "ai", Title: "AI & Agentic Systems", Role: "AI / LLM Engineer",
 		Blurb: "Harnesses, subagents and skills, memory, model routing and cost, retrieval, voice, guardrails, agent observability."},
-	{Key: "platform", Title: "Platform & Infrastructure", Role: "Platform / DevOps Engineer", Gutter: "PL",
+	{Key: "platform", Title: "Platform & Infrastructure", Role: "Platform / DevOps Engineer",
 		Blurb: "Declarative hosts, packaging, a fifty-container Docker estate, networking, storage and restore-tested backups, observability."},
-	{Key: "edge", Title: "Edge & Devices", Role: "Edge / IoT Engineer", Gutter: "ED",
+	{Key: "edge", Title: "Edge & Devices", Role: "Edge / IoT Engineer",
 		Blurb: "Twenty-node fleet on constrained devices, custom radio, solar power, deep sleep, sensors and actuation — and the failures."},
-	{Key: "products", Title: "Products", Role: "", Gutter: "PR",
+	{Key: "products", Title: "Products", Role: "",
 		Blurb: "Three active businesses, built and run rather than advised on."},
-	{Key: "history", Title: "History", Role: "", Gutter: "HI",
+	{Key: "history", Title: "History", Role: "",
 		Blurb: "2000–2014: agencies, clients, engagements, and the code that survives from them."},
-	{Key: "about", Title: "About", Role: "", Gutter: "AB",
+	{Key: "about", Title: "About", Role: "",
 		Blurb: "The narrative, the non-IT work that came first, education, and how to get in touch."},
 }
 

internal/content/markdown.go

@@ -4,9 +4,15 @@ import (
 	"bytes"
 	"fmt"
 	stdhtml "html"
+	"image"
+	_ "image/jpeg"
+	_ "image/png"
 	"io"
+	"os"
 	"path"
+	"path/filepath"
 	"regexp"
+	"strconv"
 	"strings"
 
 	"github.com/alecthomas/chroma/v2"
@@ -76,6 +82,7 @@ func (r *Renderer) Transform(doc *ast.Document, reader text.Reader, pc parser.Co
 			node.Destination = r.rewrite(current, string(node.Destination), false)
 		case *ast.Image:
 			node.Destination = r.rewrite(current, string(node.Destination), true)
+			r.sizeImage(current, node)
 		}
 		return ast.WalkContinue, nil
 	})
@@ -108,6 +115,70 @@ func (r *Renderer) rewrite(from *Document, dest string, image bool) []byte {
 	return []byte(dest)
 }
 
+// sizeImage records an image's intrinsic size and loading hints on the node, so
+// the rendered page reserves the space before the file arrives. Without this the
+// text jumps as each image lands, which is the most visible performance defect a
+// page of diagrams can have.
+//
+// Only the four attributes in goldmark's image filter are used, and only when a
+// real size is known: an unknown asset keeps the browser's own behaviour.
+func (r *Renderer) sizeImage(from *Document, node *ast.Image) {
+	if r.set == nil || from == nil {
+		return
+	}
+	dest := string(node.Destination)
+	if strings.Contains(dest, "://") || strings.HasPrefix(dest, "data:") {
+		return
+	}
+	rel := dest
+	if strings.HasPrefix(rel, "/assets/") {
+		rel = "assets/" + strings.TrimPrefix(rel, "/assets/")
+	} else if i := strings.IndexAny(rel, "#?"); i >= 0 {
+		rel = rel[:i]
+	}
+	w, h, ok := imageSize(filepath.Join(r.set.Root, filepath.FromSlash(path.Clean(rel))))
+	if !ok {
+		return
+	}
+	node.SetAttributeString("width", []byte(strconv.Itoa(w)))
+	node.SetAttributeString("height", []byte(strconv.Itoa(h)))
+	node.SetAttributeString("loading", []byte("lazy"))
+	node.SetAttributeString("decoding", []byte("async"))
+}
+
+// svgSize reads width and height from the root element of an SVG. The diagrams
+// in content/assets are authored in this repository with explicit dimensions,
+// so a viewBox alone is not expected to occur.
+var svgSizeRe = regexp.MustCompile(`<svg[^>]*\swidth="(\d+(?:\.\d+)?)(?:px)?"[^>]*\sheight="(\d+(?:\.\d+)?)(?:px)?"`)
+
+// imageSize returns the intrinsic pixel size of a content asset.
+func imageSize(abs string) (int, int, bool) {
+	f, err := os.Open(abs)
+	if err != nil {
+		return 0, 0, false
+	}
+	defer f.Close()
+	if strings.HasSuffix(strings.ToLower(abs), ".svg") {
+		head := make([]byte, 4096)
+		n, _ := f.Read(head)
+		m := svgSizeRe.FindSubmatch(head[:n])
+		if m == nil {
+			return 0, 0, false
+		}
+		w, err1 := strconv.ParseFloat(string(m[1]), 64)
+		h, err2 := strconv.ParseFloat(string(m[2]), 64)
+		if err1 != nil || err2 != nil || w <= 0 || h <= 0 {
+			return 0, 0, false
+		}
+		return int(w + 0.5), int(h + 0.5), true
+	}
+	cfg, _, err := image.DecodeConfig(f)
+	if err != nil || cfg.Width <= 0 || cfg.Height <= 0 {
+		return 0, 0, false
+	}
+	return cfg.Width, cfg.Height, true
+}
+
 // docKey carries the document being rendered through the parser context so
 // the link rewriter knows what "relative" means.
 var docKey = parser.NewContextKey()