feat: content-UX — header search, metadata de-noise, icon/microcopy coherence, article composition

src/pages/index.astro

@@ -7,6 +7,9 @@ const posts = (await getCollection('news', ({ data }) => !data.draft))
   .slice(0, 3);
 const fmt = (d) => new Intl.DateTimeFormat('en-GB', { dateStyle: 'long' }).format(d);
 const iso = (d) => d.toISOString().slice(0, 10);
+// Reading time from the Markdown body (~220 wpm) — differentiating card metadata;
+// category/author are identical across all articles, so cards omit them (NN/g).
+const readMin = (p) => Math.max(1, Math.round((p.body ?? '').split(/\s+/).length / 220));
 // 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' },
@@ -24,23 +27,18 @@ const services = [
       <div class="eyebrow">Cherenkov Telescope Array Observatory</div>
       <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>
-        <svg class="ico search-ico" aria-hidden="true" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" /><path d="m20 20-4.3-4.3" /></svg>
-        <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>
+      {/* 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. */}
+      <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>
+      </div>
+      {posts[0] && (
+        <p class="hero-teaser">Latest: <a href={`/news/${posts[0].id}`}>{posts[0].data.title}</a></p>
+      )}
     </div>
   </section>
 
-  <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' });
-  </script>
-
   {/* Surface rhythm (DESIGN.md): services on Moon Gray, editorial news on white */}
   <section class="band--moon">
     <div class="container page">
@@ -56,7 +54,7 @@ const services = [
             <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>}
+            {s.badge === 'tbd' && <span class="badge-ext">Planned — not yet available</span>}
           </article>
         ))}
       </div>
@@ -73,10 +71,9 @@ const services = [
         <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>
             <p class="desc">{post.data.description}</p>
-            <div class="meta">{post.data.author} · <time datetime={iso(post.data.date)}>{fmt(post.data.date)}</time></div>
+            <div class="meta"><time datetime={iso(post.data.date)}>{fmt(post.data.date)}</time> · {readMin(post)} min read</div>
           </div>
         </article>
       ))}