Tighten ultrawide layout with visible side gutters.

Cap content at 768-960px via PageShell width tiers, add muted outer margins, and limit gua grid to four columns.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/page-shell.tsx

@@ -1,19 +1,34 @@
 import Header from "@/components/header";
 import Footer from "@/components/footer";
 import TaijiBackdrop from "@/components/layout/taiji-backdrop";
+import {
+  CONTENT_SHELL,
+  type ContentShellWidth,
+} from "@/lib/layout";
+import { cn } from "@/lib/utils";
 
 export default function PageShell({
   children,
   className = "",
+  width = "default",
 }: {
   children: React.ReactNode;
   className?: string;
+  width?: ContentShellWidth;
 }) {
   return (
-    <div className="relative flex min-h-screen flex-col">
+    <div className="relative flex min-h-screen flex-col bg-muted/50 dark:bg-stone-950">
       <TaijiBackdrop />
       <Header />
-      <div className={`flex w-full flex-1 flex-col ${className}`}>{children}</div>
+      <main
+        className={cn(
+          "mx-auto flex w-full flex-1 flex-col border-border/40 bg-background sm:border-x",
+          CONTENT_SHELL[width],
+          className,
+        )}
+      >
+        {children}
+      </main>
       <Footer />
     </div>
   );