feat: round 2 — responsive header (width-math tiers), brand footer, editorial article, modern search; 2026 upgrades (view transitions, text-wrap, self-hosted fonts, inline SVG icons, color-mix, subgrid, container queries)

src/pages/index.astro

@@ -26,6 +26,7 @@ const services = [
       <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 */}

src/pages/news/[slug].astro

@@ -16,7 +16,7 @@ const fmt = (d) => new Intl.DateTimeFormat('en-GB', { dateStyle: 'long' }).forma
   <article class="container article">
     <a class="back" href="/news">← All news</a>
     <h1>{post.data.title}</h1>
-    <div class="meta">{post.data.category} · {post.data.author} · <time datetime={post.data.date.toISOString().slice(0, 10)}>{fmt(post.data.date)}</time></div>
+    <div class="meta"><span class="cat">{post.data.category}</span><span>{post.data.author}</span>·<time datetime={post.data.date.toISOString().slice(0, 10)}>{fmt(post.data.date)}</time></div>
     {post.data.cover && <img class="cover" src={encodeURI(post.data.cover)} alt="" />}
     {toc.length >= 3 && (
       <nav class="toc" aria-label="On this page">

src/pages/search.astro

@@ -13,6 +13,7 @@ import Base from '../layouts/Base.astro';
   <section class="container page">
     <form class="search-form" role="search" action="/search" method="get">
       <label class="sr-only" for="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="q" name="q" type="search" placeholder="e.g. LST camera, Council, data…" autocomplete="off" />
       <button class="btn" type="submit">Search</button>
     </form>