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>