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/blog/article_index_page.html

@@ -10,26 +10,39 @@
   <meta property="og:url" content="{{ canonical }}" />
 {% endblock %}
 {% block content %}
-<h1>{{ page.title }}</h1>
-<section>
-  <h2>Filter by tag</h2>
-  <a href="/articles/" {% if not active_tag %}aria-current="page"{% endif %}>All</a>
-  {% for tag in available_tags %}
-    <a href="/articles/?tag={{ tag.slug }}" {% if active_tag == tag.slug %}aria-current="page"{% endif %}>{{ tag.name }}</a>
+
+<!-- Page Header -->
+<div class="py-8 md:py-12 border-b border-zinc-200 dark:border-zinc-800 mb-12">
+  <h1 class="font-display font-black text-4xl md:text-6xl mb-6">{{ page.title }}</h1>
+
+  <!-- Tag Filters -->
+  <div class="flex flex-wrap gap-3">
+    <a href="/articles/" class="px-4 py-2 font-mono text-sm font-bold border transition-colors {% if not active_tag %}bg-brand-dark text-brand-light dark:bg-brand-light dark:text-brand-dark border-transparent{% else %}bg-transparent text-zinc-600 dark:text-zinc-400 border-zinc-300 dark:border-zinc-700 hover:text-brand-dark dark:hover:text-brand-light hover:border-brand-dark dark:hover:border-brand-light{% endif %}" {% if not active_tag %}aria-current="page"{% endif %}>All</a>
+    {% for tag in available_tags %}
+      <a href="/articles/?tag={{ tag.slug }}" class="px-4 py-2 font-mono text-sm font-bold border transition-colors {% if active_tag == tag.slug %}bg-brand-dark text-brand-light dark:bg-brand-light dark:text-brand-dark border-transparent{% else %}bg-transparent text-zinc-600 dark:text-zinc-400 border-zinc-300 dark:border-zinc-700 hover:text-brand-dark dark:hover:text-brand-light hover:border-brand-dark dark:hover:border-brand-light{% endif %}" {% if active_tag == tag.slug %}aria-current="page"{% endif %}>{{ tag.name }}</a>
+    {% endfor %}
+  </div>
+</div>
+
+<!-- Article List -->
+<div class="space-y-8">
+  {% for article in articles %}
+    {% include 'components/article_card.html' with article=article %}
+  {% empty %}
+    <p class="font-mono text-zinc-500 py-12 text-center">No articles found.</p>
   {% endfor %}
-</section>
-{% for article in articles %}
-  {% include 'components/article_card.html' with article=article %}
-{% empty %}
-  <p>No articles found.</p>
-{% endfor %}
-<nav aria-label="Pagination">
+</div>
+
+<!-- Pagination -->
+{% if articles.has_previous or articles.has_next %}
+<nav aria-label="Pagination" class="mt-12 flex justify-center items-center gap-4 font-mono text-sm">
   {% if articles.has_previous %}
-    <a href="?page={{ articles.previous_page_number }}{% if active_tag %}&tag={{ active_tag }}{% endif %}">Previous</a>
+    <a href="?page={{ articles.previous_page_number }}{% if active_tag %}&tag={{ active_tag }}{% endif %}" class="px-6 py-3 border border-zinc-300 dark:border-zinc-700 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors">← Previous</a>
   {% endif %}
-  <span>Page {{ articles.number }} of {{ paginator.num_pages }}</span>
+  <span class="text-zinc-500">Page {{ articles.number }} of {{ paginator.num_pages }}</span>
   {% if articles.has_next %}
-    <a href="?page={{ articles.next_page_number }}{% if active_tag %}&tag={{ active_tag }}{% endif %}">Next</a>
+    <a href="?page={{ articles.next_page_number }}{% if active_tag %}&tag={{ active_tag }}{% endif %}" class="px-6 py-3 border border-zinc-300 dark:border-zinc-700 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors">Next →</a>
   {% endif %}
 </nav>
+{% endif %}
 {% endblock %}