fix: Replace Instrument Serif with Playfair Display for display headings

Instrument Serif is inherently condensed and illegible at heading sizes.
Playfair Display is wider, has proper variable weight support (400-900),
and reads well at all sizes.

apps/web/src/components/InboxList.tsx

@@ -122,7 +122,7 @@ export function InboxList({
       {/* Header */}
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
-          <h2 className="text-2xl font-display">Agent Inbox</h2>
+          <h2 className="text-lg font-semibold font-display">Agent Inbox</h2>
           <Badge variant="secondary">{joined.length}</Badge>
         </div>
         <Button variant="outline" size="sm" onClick={onRefresh}>

apps/web/src/components/PhaseAccordion.tsx

@@ -60,7 +60,7 @@ export function PhaseAccordion({
         )}
 
         {/* Phase name */}
-        <span className="min-w-0 flex-1 truncate font-display">
+        <span className="min-w-0 flex-1 truncate font-display font-medium">
           {phase.name}
         </span>
 

apps/web/src/index.css

@@ -15,17 +15,17 @@
 }
 
 @font-face {
-  font-family: 'Instrument Serif';
-  src: url('/fonts/InstrumentSerif-Regular.woff2') format('woff2');
-  font-weight: 400;
+  font-family: 'Playfair Display';
+  src: url('/fonts/PlayfairDisplay-Variable.woff2') format('woff2');
+  font-weight: 400 900;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Instrument Serif';
-  src: url('/fonts/InstrumentSerif-Italic.woff2') format('woff2');
-  font-weight: 400;
+  font-family: 'Playfair Display';
+  src: url('/fonts/PlayfairDisplay-VariableItalic.woff2') format('woff2');
+  font-weight: 400 900;
   font-style: italic;
   font-display: swap;
 }

apps/web/src/layouts/AppLayout.tsx

@@ -41,8 +41,8 @@ export function AppLayout({ children, onOpenCommandPalette, connectionState }: A
                 CW
               </span>
               <span className="hidden items-baseline gap-1 sm:inline-flex">
-                <span className="font-display tracking-normal">Codewalk</span>
-                <span className="font-display tracking-normal text-muted-foreground">District</span>
+                <span className="font-display font-bold tracking-tight">Codewalk</span>
+                <span className="font-display font-medium tracking-tight text-muted-foreground">District</span>
               </span>
             </Link>
             <nav className="flex items-center gap-1">

apps/web/src/routes/__root.tsx

@@ -23,7 +23,7 @@ function RootLayout() {
   return (
     <>
       <ConnectionBanner state={connectionState} />
-      <AppLayout onOpenCommandPalette={openCommandPalette}>
+      <AppLayout onOpenCommandPalette={openCommandPalette} connectionState={connectionState}>
         <ErrorBoundary>
           <Outlet />
         </ErrorBoundary>

apps/web/src/routes/agents.tsx

@@ -192,7 +192,7 @@ function AgentsPage() {
       <div className="shrink-0 space-y-3">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2">
-            <h1 className="font-display text-2xl">Agents</h1>
+            <h1 className="font-display text-lg font-semibold">Agents</h1>
             <Badge variant="secondary">{agents.length}</Badge>
           </div>
           <Button variant="outline" size="sm" onClick={handleRefresh}>

apps/web/src/routes/initiatives/index.tsx

@@ -40,7 +40,7 @@ function DashboardPage() {
     >
       {/* Page header */}
       <div className="flex items-center justify-between">
-        <h1 className="font-display text-3xl">Initiatives</h1>
+        <h1 className="font-display text-2xl font-semibold">Initiatives</h1>
         <div className="flex items-center gap-3">
           <select
             value={statusFilter}

apps/web/src/routes/settings.tsx

@@ -13,7 +13,7 @@ function SettingsLayout() {
   return (
     <div className="mx-auto max-w-4xl space-y-4">
       <div className="flex items-center justify-between">
-        <h1 className="font-display text-3xl">Settings</h1>
+        <h1 className="font-display text-2xl font-semibold">Settings</h1>
       </div>
       <nav className="flex gap-1 border-b border-border">
         {settingsTabs.map((tab) => (

apps/web/src/routes/settings/health.tsx

@@ -97,7 +97,7 @@ function HealthCheckPage() {
       {/* Server Status */}
       <Card>
         <CardHeader>
-          <CardTitle className="flex items-center gap-2 font-display text-xl">
+          <CardTitle className="flex items-center gap-2 font-display text-lg">
             <Server className="h-5 w-5" />
             Server Status
           </CardTitle>
@@ -124,7 +124,7 @@ function HealthCheckPage() {
 
       {/* Accounts */}
       <div className="space-y-3">
-        <h2 className="font-display text-xl">Accounts</h2>
+        <h2 className="font-display text-lg font-semibold">Accounts</h2>
         {accounts.length === 0 ? (
           <Card>
             <CardContent className="py-6">
@@ -154,7 +154,7 @@ function HealthCheckPage() {
 
       {/* Projects */}
       <div className="space-y-3">
-        <h2 className="font-display text-xl">Projects</h2>
+        <h2 className="font-display text-lg font-semibold">Projects</h2>
         {projects.length === 0 ? (
           <Card>
             <CardContent className="py-6">

apps/web/tailwind.config.ts

@@ -18,7 +18,7 @@ export default {
       fontFamily: {
         sans: ["Geist Sans", ...defaultTheme.fontFamily.sans],
         mono: ["Geist Mono", ...defaultTheme.fontFamily.mono],
-        display: ['"Instrument Serif"', "Georgia", "serif"],
+        display: ['"Playfair Display"', "Georgia", "serif"],
       },
       colors: {
         border: "hsl(var(--border))",