fix: mobile gutters, header search tiers, suggest wiring + empty-state, news pagination, hero CTAs, ghost button

- padding-block on .page/.page-head/.article: container gutter survived only >=1176px (shorthand padding zeroed it) — mobile content sat flush left
- restore <=1024px tiers: field hidden, magnifier + menu visible (header no longer overflows at 375px)
- re-wire hdr-q suggestions lost in the field restore; newsSearch inits null-safe
- focused-empty search state: recent queries (localStorage, cap 4) + latest articles (Baymard autocomplete guidance)
- suggest panel 480px (Baymard/DocSearch width convention)
- /news page 1 = 25 items (featured + 24 = even 3-col rows), later pages 24, custom slicing
- hero CTAs: primary Browse news (/news, spec-first real service), ghost Explore the data (external); mock Proposals out of hero
- .btn.btn--ghost compound selector — .btn base defined later was filling ghosts with Cherenkov

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012jWfn3RwPfFGTtBddm36Uy

src/pages/news/[...page].astro

@@ -2,13 +2,34 @@
 import { getCollection } from 'astro:content';
 import Base from '../../layouts/Base.astro';
 
-// Paginated archive via Astro's built-in paginate(): the [...page] rest route
-// makes page 1 the bare /news URL, then /news/2 … /news/N.
-export async function getStaticPaths({ paginate }) {
+// Paginated archive; the [...page] rest route makes page 1 the bare /news URL,
+// then /news/2 … /news/N. Custom slicing instead of paginate(): page 1 holds
+// 25 items (1 featured lead + 24 grid = even 3-column rows), later pages 24 —
+// paginate() cannot vary page size.
+export async function getStaticPaths() {
   const posts = (await getCollection('news', ({ data }) => !data.draft)).sort(
     (a, b) => b.data.date.valueOf() - a.data.date.valueOf(),
   );
-  return paginate(posts, { pageSize: 24 });
+  const FIRST = 25, REST = 24;
+  const chunks = [posts.slice(0, FIRST)];
+  for (let i = FIRST; i < posts.length; i += REST) chunks.push(posts.slice(i, i + REST));
+  const lastPage = chunks.length;
+  const hrefOf = (n) => (n === 1 ? '/news' : `/news/${n}`);
+  return chunks.map((data, i) => {
+    const n = i + 1;
+    return {
+      params: { page: n === 1 ? undefined : String(n) },
+      props: { page: {
+        data,
+        currentPage: n,
+        lastPage,
+        url: {
+          prev: n > 1 ? hrefOf(n - 1) : undefined,
+          next: n < lastPage ? hrefOf(n + 1) : undefined,
+        },
+      } },
+    };
+  });
 }
 
 const { page } = Astro.props;