Give the content pages the landing's look

Moving from the landing to a page read as changing sites: a narrow
centred column on a flat background, light headings, no cards. The
page now opens like the landing's hero — the same two lights, the same
left edge as the logo, a bold title with the excerpt as its lead — and
the body's headings are bold like every section title on the landing.

The lights move into a shared mixin (ui/_lights.scss) so the hero and
the pages cannot drift apart. On a page they sit on the whole <main>
with `overflow: clip`, so they fade out on their own instead of ending
in a hard edge right where the text starts, and `clip` rather than
`hidden` keeps the sticky side column working.

A side column keeps a page from being a dead end: "keep reading" cards
for the other pages, its own category first, and a card to get in
touch, both on the landing's card surface.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

landing/src/app/ui/_lights.scss

@@ -0,0 +1,53 @@
+// The two soft lights behind the top of a page, shared by the landing's hero
+// and the content pages so moving from one to the other does not feel like
+// changing sites.
+//
+// Lights rather than an image: nothing to download, and nothing that dates the
+// page when the brand shifts. `isolate` keeps the negative z-index inside the
+// element instead of behind the page background.
+//
+// `$overflow: clip` for a tall element with sticky children: `hidden` makes the
+// element a scroll container, and `position: sticky` inside one stops
+// following the page.
+@mixin glow($overflow: hidden) {
+  position: relative;
+  isolation: isolate;
+  overflow: $overflow;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    border-radius: 50%;
+    pointer-events: none;
+    filter: blur(80px);
+  }
+
+  &::before {
+    top: -14rem;
+    left: 50%;
+    width: 64rem;
+    height: 38rem;
+    transform: translateX(-58%);
+    opacity: 0.5;
+    background: radial-gradient(
+      closest-side,
+      var(--pi-color-primary),
+      transparent
+    );
+  }
+
+  &::after {
+    top: 4rem;
+    right: -8rem;
+    width: 26rem;
+    height: 26rem;
+    opacity: 0.35;
+    background: radial-gradient(
+      closest-side,
+      var(--pi-color-accent),
+      transparent
+    );
+  }
+}