feat(visual): particle field background + section-anchored accent marks

src/pages/index.astro

@@ -31,16 +31,9 @@ const indexItems = [
 ---
 
 <BaseLayout title="Josh Bairstow" current="home" showCoordInTopbar={true}>
-  <Fragment slot="marks">
-    <Mark kind="ringdots" width={84} top="14%" left="3%" rotate={-5} />
-    <Mark kind="pipes"    width={28} top="73%" left="6%" rotate={8} />
-    <Mark kind="dots"     width={52} top="26%" right="3.5%" />
-    <Mark kind="concentric" width={42} bottom="9%" right="7%" />
-    <Mark kind="ringdots" width={66} bottom="20%" left="44%" rotate={-3} />
-  </Fragment>
-
   <main class="home" data-layout="stack">
     <section class="intro">
+      <Mark kind="ringdots" width={84} top="-10px" left="-24px" rotate={-5} />
       <Eyebrow>engineer errant · Sydney</Eyebrow>
       <h2 class="statement">
         Deliberate work.<br /><em>Restless inquiry</em><span class="accent">.</span>
@@ -51,6 +44,8 @@ const indexItems = [
     </section>
 
     <section class="hero">
+      <Mark kind="dots"  width={52} top="-16px" right="-12px" />
+      <Mark kind="pipes" width={28} bottom="-8px" left="-6px" rotate={8} />
       <HeroZone client:load />
     </section>
 
@@ -68,6 +63,7 @@ const indexItems = [
     }
 
     <section class="index">
+      <Mark kind="concentric" width={42} bottom="-14px" right="-10px" />
       <Eyebrow>Index</Eyebrow>
       <nav>
         {indexItems.map((item) => (
@@ -100,6 +96,7 @@ const indexItems = [
   }
   .intro {
     grid-area: intro;
+    position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -143,6 +140,7 @@ const indexItems = [
 
   .hero {
     grid-area: hero;
+    position: relative;
     display: flex;
   }
   /* Styles for .hzframe + its children come from the React island's class names */
@@ -215,6 +213,7 @@ const indexItems = [
 
   .index {
     grid-area: index;
+    position: relative;
     text-align: left;
   }
   .index :global(.eyebrow) {