Pagination fixes, blog page chooser, Events & Projects redesign

Pagination
- Fix the broken mobile layout on News & Projects: page numbers on top,
  Previous / Next side-by-side below (shared .pagination component)
- Add a page chooser to the Blog: rewrite blog-filter.js to combine the
  topic filter with client-side pagination (page size 6), add the pager
  markup (all 3 languages) and .blog-pagination styles; it auto-hides
  when a topic has one page

Events & Projects — match the Blog/News design
- Hero: uppercase letter-spaced eyebrow, sentence-case bold title, lead
  subtitle, soft gradient; drop the redundant hero subscribe form and the
  placeholder copy (signup still available in the bottom newsletter CTA);
  align MK/SI titles to "Events & projects"
- Filters: News-style pills (dark active), left-aligned, with the thin
  separator line below; .filter-inner wrapper aligns pills/separator with
  the grid
- Spacing: reduce the gap under the header, add space below the filter so
  the separator / Events sub-filter no longer collide with "All our
  projects" (these hero/spacing tweaks also tidy the shared About/Get-to-know/
  Timeline heroes)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

css/pages/_blog.css

@@ -176,3 +176,13 @@
     .blog-hero h1 { font-size: 30px; }
     .blog-grid { columns: 1; }
 }
+
+/* Pagination — reuses the shared .pagination look; reset button chrome.
+   Topic filter + client-side paging are handled by blog-filter.js. */
+.blog-pagination { margin-top: 40px; }
+.blog-pagination .pagination-arrow,
+.blog-pagination .page-number {
+    background: transparent;
+    border: none;
+    font-family: inherit;
+}