Add responsive content width for ultrawide while keeping 1080p layout.

Scale from 896px on 1080p up to 1440px on 3440px screens via viewport breakpoints in site-width.

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

components/header.tsx

@@ -3,10 +3,7 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { TaijiIcon } from "@/components/svg/taiji";
 import { ModeToggle } from "@/components/mode-toggle";
-
-/** 与 PageShell 同宽 — 类名须完整书写供 Tailwind 扫描 */
-const HEADER_INNER =
-  "mx-auto w-full max-w-4xl px-4 sm:px-6 lg:px-8";
+import { SITE_WIDTH_INNER } from "@/components/layout/site-width";
 
 const NAV_ITEMS = [
   { href: "/learn", label: "易经学习" },
@@ -40,7 +37,7 @@ export default function Header() {
   return (
     <header className="relative z-10 border-b border-border/40 bg-card/70 py-3 shadow-sm backdrop-blur-md">
       <div
-        className={`${HEADER_INNER} grid grid-cols-[1fr_auto] items-center gap-y-2 sm:flex sm:justify-between`}
+        className={`${SITE_WIDTH_INNER} grid grid-cols-[1fr_auto] items-center gap-y-2 sm:flex sm:justify-between`}
       >
         <Link href="/" className="flex items-center gap-2">
           <TaijiIcon />