feat: design system — ambient motion, spacing/elevation/surface tokens, right-rail TOC, footer links, DESIGN.md

src/pages/index.astro

@@ -17,9 +17,8 @@ const services = [
   { title: 'Documentation', desc: 'User guides and technical documentation.', badge: 'tbd' },
 ];
 ---
-<Base title="CTAO Science Portal" description="News, observation proposals, data and user services of the Cherenkov Telescope Array Observatory">
+<Base title="CTAO Science Portal" description="News, observation proposals, data and user services of the Cherenkov Telescope Array Observatory" ambient>
   <section class="hero-band">
-    <span class="flash" aria-hidden="true"></span>
     <div class="container hero">
       <div class="eyebrow">Cherenkov Telescope Array Observatory</div>
       <h1>CTAO Science Portal</h1>
@@ -41,24 +40,29 @@ const services = [
     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">
-      {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>
-      ))}
+  {/* Surface rhythm (DESIGN.md): services on Moon Gray, editorial news on white */}
+  <section class="band--moon">
+    <div class="container page">
+      <div class="section-head"><h2>Services</h2></div>
+      <div class="grid">
+        {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>
+  </section>
 
+  <section class="container page">
     <div class="section-head">
       <h2>Latest news</h2>
       <a class="more" href="/news">All news →</a>