feat(layout): shared tiled-panel page pattern across secondary pages

Calibrate all non-home pages to one layout language matching the Wix
design: the celtic-knot tile becomes the page background (shown in the
gutters), content floats in a single near-black rounded panel, and cards
inside are plain cards.

- Add PageShell (floating bg-panel card), PageSection (plain content
  block), and PageHero (centered hero; left grid w/ aside image) under
  src/components/layout/.
- Tile the body background and add a --panel token; the home page's
  fixed landscape sits above this layer, so home is unchanged.
- Re-skin the 11 secondary views through these primitives and unify
  headings to the font-display uppercase idiom.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/style.css

@@ -25,6 +25,8 @@
   --border: hsl(151 50% 18%);
   --input: hsl(151 50% 18%);
   --ring: hsl(43 64% 50%);
+  /* Near-black green of the content panel that floats on the tiled bg. */
+  --panel: hsl(151 55% 4%);
   --radius: 0.5rem;
 }
 
@@ -48,6 +50,7 @@
   --border: hsl(151 50% 15%);
   --input: hsl(151 50% 15%);
   --ring: hsl(43 64% 52%);
+  --panel: hsl(151 55% 3%);
 }
 
 @theme inline {
@@ -70,6 +73,7 @@
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
+  --color-panel: var(--panel);
   --radius-lg: var(--radius);
   --radius-md: calc(var(--radius) - 2px);
   --radius-sm: calc(var(--radius) - 4px);
@@ -85,6 +89,12 @@
   }
   body {
     @apply bg-background text-foreground;
+    /* Celtic-knot tile is the page background; it shows in the gutters
+       around the floating content panel (see PageShell). The home page's
+       fixed landscape image sits above this layer, so home is unaffected. */
+    background-image: url('./assets/section-tile.webp');
+    background-repeat: repeat;
+    background-position: center top;
     font-family: var(--font-sans);
     font-weight: 300;
   }