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/index.astro

@@ -44,11 +44,14 @@ const services = [
       <div class="eyebrow">Cherenkov Telescope Array Observatory</div>
       <h1>CTAO Science Portal</h1>
       <p>Exploring the Universe at the Highest Energies</p>
-      {/* Search lives in the header (one search location); the hero carries the
-          two core scientist tasks per SPEC §3.1 instead — classic hero-CTA pair. */}
+      {/* Hero actions = the two REAL things a logged-out visitor can do today:
+          news (SPEC §3.1 lists general information/announcements FIRST; §3.3.1
+          "displays the main information"; calls for proposals arrive VIA news)
+          and the external Data Explorer. Proposals stays in nav + tiles — a
+          mock doesn't earn hero billing. Search lives in the header. */}
       <div class="hero-cta">
-        <a class="btn external" href="https://padc-ctao-data-explorer.obspm.fr/" target="_blank" rel="noopener">Explore the data</a>
-        <a class="btn btn--ghost" href="/proposals">Submit a proposal</a>
+        <a class="btn" href="/news">Browse news &amp; announcements</a>
+        <a class="btn btn--ghost external" href="https://padc-ctao-data-explorer.obspm.fr/" target="_blank" rel="noopener">Explore the data</a>
       </div>
     </div>
   </section>

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;