feat: implement Tailwind CSS styling based on wireframe design

- Add brand colours, fonts (Space Grotesk/Inter/Fira Code), box shadows to tailwind.config.js
- Add bg-grid-pattern, text-gradient, scrollbar, selection styles to input.css
- Add Google Fonts link and dark-mode body classes to base.html
- Style nav, footer, cookie banner, newsletter form components
- Style homepage: featured article, 12-col editorial grid, sidebar widgets
- Style article list: header, tag filters, horizontal article cards, pagination
- Style article page: hero header, prose body, share sidebar, related cards, comments
- Style code blocks and callout blocks
- CSS output grows from 4.8KB to 24KB with all brand utilities compiled

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

templates/components/cookie_banner.html

@@ -1,27 +1,43 @@
 {% if request.consent.requires_prompt %}
-<div id="cookie-banner">
-  <form method="post" action="{% url 'consent' %}">
-    {% csrf_token %}
-    <button type="submit" name="accept_all" value="1">Accept all</button>
-    <button type="submit" name="reject_all" value="1">Reject all</button>
-  </form>
-  <details>
-    <summary>Manage preferences</summary>
-    <form method="post" action="{% url 'consent' %}">
-      {% csrf_token %}
-      <label>
-        <input type="checkbox" name="analytics" value="1" />
-        Analytics cookies
-      </label>
-      <label>
-        <input type="checkbox" name="advertising" value="1" />
-        Advertising cookies
-      </label>
-      <button type="submit">Save preferences</button>
-    </form>
-  </details>
-  {% if site_settings and site_settings.privacy_policy_page %}
-    <a href="{{ site_settings.privacy_policy_page.url }}">Privacy Policy</a>
-  {% endif %}
+<div id="cookie-banner" class="fixed bottom-0 left-0 right-0 z-50 bg-brand-surfaceLight dark:bg-brand-surfaceDark border-t border-zinc-200 dark:border-zinc-800 shadow-lg">
+  <div class="max-w-7xl mx-auto px-6 py-4 flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
+    <div class="flex-1">
+      <p class="font-mono text-sm text-zinc-600 dark:text-zinc-400">
+        We use cookies to improve your experience.
+        {% if site_settings and site_settings.privacy_policy_page %}
+          <a href="{{ site_settings.privacy_policy_page.url }}" class="text-brand-cyan hover:underline">Privacy Policy</a>
+        {% endif %}
+      </p>
+    </div>
+    <div class="flex items-center gap-3 shrink-0">
+      <form method="post" action="{% url 'consent' %}" class="inline">
+        {% csrf_token %}
+        <button type="submit" name="reject_all" value="1"
+          class="px-4 py-2 border border-zinc-300 dark:border-zinc-700 font-mono text-sm hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors">Reject all</button>
+      </form>
+      <form method="post" action="{% url 'consent' %}" class="inline">
+        {% csrf_token %}
+        <button type="submit" name="accept_all" value="1"
+          class="px-4 py-2 bg-brand-dark text-brand-light dark:bg-brand-light dark:text-brand-dark font-display font-bold text-sm hover:bg-brand-cyan transition-colors">Accept all</button>
+      </form>
+      <details class="relative">
+        <summary class="px-4 py-2 border border-zinc-300 dark:border-zinc-700 font-mono text-sm hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors cursor-pointer list-none">Manage</summary>
+        <div class="absolute bottom-full right-0 mb-2 w-72 bg-brand-surfaceLight dark:bg-brand-surfaceDark border border-zinc-200 dark:border-zinc-800 p-4 shadow-lg">
+          <form method="post" action="{% url 'consent' %}" class="space-y-3">
+            {% csrf_token %}
+            <label class="flex items-center gap-3 font-mono text-sm cursor-pointer">
+              <input type="checkbox" name="analytics" value="1" class="accent-brand-cyan" />
+              Analytics cookies
+            </label>
+            <label class="flex items-center gap-3 font-mono text-sm cursor-pointer">
+              <input type="checkbox" name="advertising" value="1" class="accent-brand-pink" />
+              Advertising cookies
+            </label>
+            <button type="submit" class="w-full px-4 py-2 bg-brand-dark text-brand-light dark:bg-brand-light dark:text-brand-dark font-display font-bold text-sm hover:bg-brand-cyan transition-colors">Save preferences</button>
+          </form>
+        </div>
+      </details>
+    </div>
+  </div>
 </div>
 {% endif %}