ui polish pass: scroll-driven effects (card reveal, header shadow, reading progress), nav underline-grow, card meta icons, og:image svg fallback, apple-touch-icon+favicon, hero 472->180KB + preload, article cover CLS guard, ::selection, per-article lang, robots noindex (demo); article: db-cms comparison diagram, 6-year pros/cons, reuse section

src/pages/index.astro

@@ -97,7 +97,7 @@ const planned = ['Scheduling', 'Science alerts'];
           <div class="body">
             <h3><a href={`/news/${post.id}`}>{post.data.title}</a></h3>
             <p class="desc">{post.data.description}</p>
-            <div class="meta"><time datetime={iso(post.data.date)}>{fmt(post.data.date)}</time> · {readMin(post)} min read</div>
+            <div class="meta"><span><svg class="ico" aria-hidden="true" viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="16" rx="2" /><path d="M4 10h16M8 3v4M16 3v4" /></svg><time datetime={iso(post.data.date)}>{fmt(post.data.date)}</time></span><span><svg class="ico" aria-hidden="true" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg>{readMin(post)} min read</span></div>
           </div>
         </article>
       ))}

src/pages/news/[...page].astro

@@ -69,7 +69,7 @@ const hrefFor = (n) => (n === 1 ? '/news' : `/news/${n}`);
           <div class="body">
             <h3><a href={`/news/${post.id}`}>{post.data.title}</a></h3>
             <p class="desc">{post.data.description}</p>
-            <div class="meta"><time datetime={iso(post.data.date)}>{fmt(post.data.date)}</time> · {readMin(post)} min read</div>
+            <div class="meta"><span><svg class="ico" aria-hidden="true" viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="16" rx="2" /><path d="M4 10h16M8 3v4M16 3v4" /></svg><time datetime={iso(post.data.date)}>{fmt(post.data.date)}</time></span><span><svg class="ico" aria-hidden="true" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg>{readMin(post)} min read</span></div>
           </div>
         </article>
       ))}

src/pages/news/[slug].astro

@@ -20,7 +20,10 @@ const toc = headings.filter((h) => h.depth === 2 || h.depth === 3);
 const fmt = (d) => new Intl.DateTimeFormat('en-GB', { dateStyle: 'long' }).format(d);
 const readMin = Math.max(1, Math.round((post.body ?? '').split(/\s+/).length / 220));
 ---
-<Base title={`${post.data.title} — CTAO`} description={post.data.description} type="article" image={post.data.cover && encodeURI(post.data.cover)}>
+<Base title={`${post.data.title} — CTAO`} description={post.data.description} type="article" image={post.data.cover && encodeURI(post.data.cover)} lang={post.data.lang}>
+  {/* Reading progress (scroll-driven CSS, no JS) — styled only where
+      animation-timeline is supported; elsewhere it stays an empty div. */}
+  <div class="read-progress" aria-hidden="true"></div>
   {/* TOC pattern (MDN/Stripe/NN-g): sticky right rail ≥1200px, collapsed <details>
       under the title below that. CSS shows exactly one of the two (DESIGN.md). */}
   <div class="container article-layout">