Add privacy policy page and cookie consent banner

The site was loading Google Analytics 4 unconditionally with no consent
gate — non-essential cookies set before consent (PECR reg. 6), and no
privacy policy was published at all.

- Add /privacy — full Privacy and Cookie Policy from tinqs/legal,
  styled with the site's existing design tokens, no tracking on the page
- Gate GA4 behind opt-in consent (consent.js / consent.css); nothing
  loads until the visitor accepts, and declining clears any _ga cookies
- Add Privacy Policy + Cookie Settings links to the footer, patched in
  the footer component so they survive React hydration
- Cookie Settings reopens the banner so consent can be withdrawn as
  easily as it was given (UK GDPR Art. 7(3))
- Add /privacy to sitemap.xml

Verified with Playwright: zero googletagmanager requests before consent,
GA loads only after Accept, choice persists across reloads, withdrawal
works, no horizontal scroll on mobile.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

public/consent.css

@@ -0,0 +1,114 @@
+/* Cookie consent banner — uses the site's design tokens from the main stylesheet. */
+#cookie-banner {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  background: var(--c-surface, #14131a);
+  border-top: 1px solid var(--c-border, #1e1c24);
+  box-shadow: 0 -8px 32px rgba(0, 0, 0, .45);
+  animation: cookie-banner-in .35s var(--ease, cubic-bezier(.25, .46, .45, .94)) both;
+}
+
+@keyframes cookie-banner-in {
+  from { transform: translateY(100%); opacity: 0; }
+  to   { transform: translateY(0);    opacity: 1; }
+}
+
+.cookie-banner__inner {
+  max-width: var(--w-site, 1200px);
+  margin: 0 auto;
+  padding: var(--space-l, 24px) 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-xl, 32px);
+  flex-wrap: wrap;
+}
+
+.cookie-banner__text {
+  margin: 0;
+  flex: 1 1 420px;
+  font-family: var(--f-body, system-ui, sans-serif);
+  font-size: var(--step--1, .8rem);
+  line-height: 1.65;
+  color: var(--c-text-dim, #9e9890);
+}
+
+.cookie-banner__text a {
+  color: var(--c-accent, #c9935a);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  transition: color .25s;
+}
+
+.cookie-banner__text a:hover,
+.cookie-banner__text a:focus-visible {
+  color: var(--c-accent-l, #e0b87a);
+}
+
+.cookie-banner__actions {
+  display: flex;
+  gap: var(--space-m, 16px);
+  flex-shrink: 0;
+}
+
+.cookie-banner__btn {
+  font-family: var(--f-body, system-ui, sans-serif);
+  font-size: var(--step--1, .8rem);
+  font-weight: 500;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+  padding: 12px 26px;
+  border-radius: 2px;
+  cursor: pointer;
+  transition: background .25s, color .25s, border-color .25s;
+}
+
+.cookie-banner__btn--ghost {
+  background: transparent;
+  border: 1px solid var(--c-border, #1e1c24);
+  color: var(--c-text-dim, #9e9890);
+}
+
+.cookie-banner__btn--ghost:hover,
+.cookie-banner__btn--ghost:focus-visible {
+  border-color: var(--c-text-mute, #837d76);
+  color: var(--c-text, #e8e4df);
+}
+
+.cookie-banner__btn--solid {
+  background: var(--c-accent, #c9935a);
+  border: 1px solid var(--c-accent, #c9935a);
+  color: var(--c-bg, #0a0a0f);
+}
+
+.cookie-banner__btn--solid:hover,
+.cookie-banner__btn--solid:focus-visible {
+  background: var(--c-accent-l, #e0b87a);
+  border-color: var(--c-accent-l, #e0b87a);
+}
+
+.cookie-banner__btn:focus-visible {
+  outline: 2px solid var(--c-accent-l, #e0b87a);
+  outline-offset: 2px;
+}
+
+@media (max-width: 720px) {
+  .cookie-banner__inner {
+    padding: var(--space-l, 24px);
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--space-m, 16px);
+  }
+  /* In a column flex container flex-basis sizes the HEIGHT, so the 420px
+     basis above would stretch the banner over half the viewport. */
+  .cookie-banner__text { flex: 0 1 auto; }
+  .cookie-banner__actions { justify-content: stretch; }
+  .cookie-banner__btn { flex: 1; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #cookie-banner { animation: none; }
+}