feat: portal IA per spec (home entry point, /news, /proposals+redirect, /support), live search + suggestions, article TOC, mobile disclosure menu, CMS preview styles, modernization pass 1

src/pages/index.astro

@@ -2,29 +2,70 @@
 import { getCollection } from 'astro:content';
 import Base from '../layouts/Base.astro';
 
-const posts = (await getCollection('news', ({ data }) => !data.draft)).sort(
-  (a, b) => b.data.date.valueOf() - a.data.date.valueOf(),
-);
+const posts = (await getCollection('news', ({ data }) => !data.draft))
+  .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
+  .slice(0, 3);
 const fmt = (d) => new Intl.DateTimeFormat('en-GB', { dateStyle: 'long' }).format(d);
 const iso = (d) => d.toISOString().slice(0, 10);
+// Services per the Science Portal spec; unbuilt ones are labelled, never faked.
+const services = [
+  { title: 'Proposals', href: '/proposals', desc: 'Submit observation proposals, including ToO / MWL requests.', badge: 'mock' },
+  { title: 'Data Explorer', href: 'https://padc-ctao-data-explorer.obspm.fr/', ext: true, desc: 'Search and download CTAO science data products.', badge: 'ext' },
+  { title: 'Dashboard', href: '/dashboard', desc: 'Your proposals, data products and support tickets in one place.', badge: 'mock' },
+  { title: 'User Support', href: '/support', desc: 'Help desk, FAQ, user forum and mailing lists.', badge: 'mock' },
+  { title: 'Software', desc: 'Science analysis tools and pipelines.', badge: 'tbd' },
+  { title: 'Documentation', desc: 'User guides and technical documentation.', badge: 'tbd' },
+];
 ---
-<Base title="CTAO Science Portal — News" description="News and announcements of the CTAO">
+<Base title="CTAO Science Portal" description="News, observation proposals, data and user services of the Cherenkov Telescope Array Observatory">
   <section class="hero-band">
     <span class="flash" aria-hidden="true"></span>
     <div class="container hero">
       <div class="eyebrow">Cherenkov Telescope Array Observatory</div>
-      <h1>News &amp; Announcements</h1>
+      <h1>CTAO Science Portal</h1>
       <p>Exploring the Universe at the Highest Energies</p>
+      <form class="hero-search" role="search" action="/search" method="get">
+        <label class="sr-only" for="home-q">Search news</label>
+        <input id="home-q" name="q" type="search" placeholder="Search news and announcements…" autocomplete="off" />
+        <button class="btn" type="submit">Search</button>
+        {/* Live suggestions (plain links, Tab-accessible); Enter still submits to /search */}
+        <ul class="suggest" id="home-suggest"></ul>
+        <p class="sr-only" id="home-suggest-status" role="status" aria-live="polite"></p>
+      </form>
     </div>
   </section>
 
-  <section class="container" aria-label="News list">
+  <script is:inline src="/search-client.js"></script>
+  <script is:inline>
+    newsSearch({ input: 'home-q', list: 'home-suggest', status: 'home-suggest-status', limit: 6, unit: 'suggestion(s)' });
+  </script>
+
+  <section class="container page">
+    <div class="section-head"><h2>Services</h2></div>
     <div class="grid">
-      {posts.map((post, i) => (
-        <article class={i === 0 ? 'card card--featured' : 'card'}>
-          {post.data.cover && (
-            <img class="cover" src={encodeURI(post.data.cover)} alt="" loading={i === 0 ? 'eager' : 'lazy'} />
-          )}
+      {services.map((s) => (
+        <article class="card tile">
+          <h3>{s.href
+            ? (s.ext
+                ? <a class="external" href={s.href} target="_blank" rel="noopener">{s.title}</a>
+                : <a href={s.href}>{s.title}</a>)
+            : s.title}</h3>
+          <p class="desc">{s.desc}</p>
+          {s.badge === 'mock' && <span class="badge-mock">Mock</span>}
+          {s.badge === 'ext' && <span class="badge-ext">External — LUX team</span>}
+          {s.badge === 'tbd' && <span class="badge-ext">Planned (TBD)</span>}
+        </article>
+      ))}
+    </div>
+
+    <div class="section-head">
+      <h2>Latest news</h2>
+      <a class="more" href="/news">All news →</a>
+    </div>
+    <div class="grid">
+      {posts.map((post) => (
+        <article class="card">
+          {post.data.cover && <img class="cover" src={encodeURI(post.data.cover)} alt="" loading="lazy" />}
           <div class="body">
             <span class="cat">{post.data.category}</span>
             <h3><a href={`/news/${post.id}`}>{post.data.title}</a></h3>