feat: refine letters UI

app/books/bbd/[chapter]/page.tsx

@@ -43,7 +43,7 @@ export default async function BbdChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href="/books/bbd"
           className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -58,7 +58,7 @@ export default async function BbdChapterPage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-6xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         {/* Left sidebar */}
         <BbdSidebar items={sidebarItems} currentSlug={slug} />
 

app/books/bbd/page.tsx

@@ -27,7 +27,7 @@ export default async function BbdPage() {
         <p className="mt-1 text-muted-foreground">{meta.author}</p>
       </PageHeader>
 
-      <main className="max-w-3xl mx-auto px-6 py-8 space-y-8">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
         {/* Description */}
         {meta.description && (
           <p className="text-muted-foreground">{meta.description}</p>

app/books/bg/[chapter]/[verse]/page.tsx

@@ -60,7 +60,7 @@ export default async function VersePage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href="/books/bg"
           className="text-sm text-muted-foreground hover:text-foreground"
@@ -72,7 +72,7 @@ export default async function VersePage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-7xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         <ChapterViewer
           initialVerse={verse}
           initialVerseNum={requestedVerse}

app/books/bg/page.tsx

@@ -37,7 +37,7 @@ export default async function BgPage() {
         </h1>
         <p className="mt-1 text-muted-foreground">{intro.author}</p>
       </PageHeader>
-      <main className="max-w-3xl mx-auto px-6 py-8">
+      <main className="max-w-5xl mx-auto px-6 py-8">
         <Card className="divide-y divide-border py-0">
           <CardContent className="p-0">
             <ul className="divide-y divide-border">

app/books/bk/[chapter]/page.tsx

@@ -41,7 +41,7 @@ export default async function BkChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href="/books/bk"
           className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -56,7 +56,7 @@ export default async function BkChapterPage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-6xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         {/* Left sidebar */}
         <BkSidebar items={sidebarItems} currentSlug={slug} />
 

app/books/bk/page.tsx

@@ -25,7 +25,7 @@ export default async function BkPage() {
         <p className="mt-1 text-muted-foreground">{meta.author}</p>
       </PageHeader>
 
-      <main className="max-w-3xl mx-auto px-6 py-8 space-y-8">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
         {/* Description */}
         {meta.description && (
           <p className="text-muted-foreground">{meta.description}</p>

app/books/bs/[chapter]/[verse]/page.tsx

@@ -151,7 +151,7 @@ export default async function VersePage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href="/books/bs"
           className="text-sm text-muted-foreground hover:text-foreground"
@@ -163,7 +163,7 @@ export default async function VersePage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-7xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         <ChapterViewer
           initialVerse={verse}
           initialVerseNum={requestedVerse}

app/books/bs/[chapter]/page.tsx

@@ -38,7 +38,7 @@ export default async function BsChapterPage({
 
     return (
       <div className="min-h-screen bg-background">
-        <PageHeader sticky wide>
+        <PageHeader sticky>
           <Link
             href="/books/bs"
             className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -50,7 +50,7 @@ export default async function BsChapterPage({
           </h1>
         </PageHeader>
 
-        <main className="max-w-3xl mx-auto px-6 py-8">
+        <main className="max-w-5xl mx-auto px-6 py-8">
           <Card>
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">

app/books/bs/page.tsx

@@ -92,7 +92,7 @@ export default async function BsPage() {
         )}
       </PageHeader>
 
-      <main className="max-w-3xl mx-auto px-6 py-8 space-y-8">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
         {/* Front Matter */}
         {(introduction || foreword) && (
           <div>

app/books/cbhc/[chapter]/page.tsx

@@ -41,7 +41,7 @@ export default async function CbhcChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href="/books/cbhc"
           className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -56,7 +56,7 @@ export default async function CbhcChapterPage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-6xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         {/* Left sidebar */}
         <CbhcSidebar items={sidebarItems} currentSlug={slug} />
 

app/books/cbhc/page.tsx

@@ -25,7 +25,7 @@ export default async function CbhcPage() {
         <p className="mt-1 text-muted-foreground">{meta.author}</p>
       </PageHeader>
 
-      <main className="max-w-3xl mx-auto px-6 py-8 space-y-8">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
         {/* Description */}
         {meta.description && (
           <p className="text-muted-foreground">{meta.description}</p>

app/books/cc/[lila]/[chapter]/[verse]/page.tsx

@@ -68,7 +68,7 @@ export default async function CcVersePage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href={`/books/cc/${lila}`}
           className="text-sm text-muted-foreground hover:text-foreground"
@@ -80,7 +80,7 @@ export default async function CcVersePage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-7xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         <ChapterViewer
           initialVerse={verseData}
           initialVerseNum={requestedVerse}

app/books/cc/[lila]/page.tsx

@@ -54,7 +54,7 @@ export default async function LilaPage({
           <ExtractedVerseCount count={totalVerses} label="extracted verses" />
         </p>
       </PageHeader>
-      <main className="max-w-3xl mx-auto px-6 py-8">
+      <main className="max-w-5xl mx-auto px-6 py-8">
         <Card className="divide-y divide-border">
           <CardContent className="p-0">
             <ul className="divide-y divide-border">

app/books/cc/page.tsx

@@ -45,7 +45,7 @@ export default async function CcPage() {
         <h1 className="mt-3 text-3xl font-bold text-foreground">{title}</h1>
         <p className="mt-1 text-muted-foreground">{author}</p>
       </PageHeader>
-      <main className="max-w-3xl mx-auto px-6 py-8">
+      <main className="max-w-5xl mx-auto px-6 py-8">
         <Card className="divide-y divide-border">
           <CardContent className="p-0">
             <ul className="divide-y divide-border">

app/books/ds/[chapter]/page.tsx

@@ -49,7 +49,7 @@ export default async function DsChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href="/books/ds"
           className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -64,7 +64,7 @@ export default async function DsChapterPage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-6xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         {/* Left sidebar */}
         <DsSidebar items={sidebarItems} currentSlug={slug} />
 

app/books/ds/page.tsx

@@ -30,7 +30,7 @@ export default async function DsPage() {
         <p className="mt-1 text-muted-foreground">{meta.author}</p>
       </PageHeader>
 
-      <main className="max-w-3xl mx-auto px-6 py-8 space-y-8">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
         {/* Description */}
         {meta.description && (
           <p className="text-muted-foreground">{meta.description}</p>

app/books/ej/[chapter]/page.tsx

@@ -43,7 +43,7 @@ export default async function EjChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href="/books/ej"
           className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -58,7 +58,7 @@ export default async function EjChapterPage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-6xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         {/* Left sidebar */}
         <EjSidebar items={sidebarItems} currentSlug={slug} />
 

app/books/ej/page.tsx

@@ -30,7 +30,7 @@ export default async function EjPage() {
         <p className="mt-1 text-muted-foreground">{meta.author}</p>
       </PageHeader>
 
-      <main className="max-w-3xl mx-auto px-6 py-8 space-y-8">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
         {/* Description */}
         {meta.description && (
           <p className="text-muted-foreground">{meta.description}</p>

app/books/ek/[chapter]/page.tsx

@@ -43,7 +43,7 @@ export default async function EkChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href="/books/ek"
           className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -58,7 +58,7 @@ export default async function EkChapterPage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-6xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         {/* Left sidebar */}
         <EkSidebar items={sidebarItems} currentSlug={slug} />
 

app/books/ek/page.tsx

@@ -27,7 +27,7 @@ export default async function EkPage() {
         <p className="mt-1 text-muted-foreground">{meta.author}</p>
       </PageHeader>
 
-      <main className="max-w-3xl mx-auto px-6 py-8 space-y-8">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
         {/* Description */}
         {meta.description && (
           <p className="text-muted-foreground">{meta.description}</p>

app/books/gg/[chapter]/page.tsx

@@ -45,7 +45,7 @@ export default async function GgChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href="/books/gg"
           className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -60,7 +60,7 @@ export default async function GgChapterPage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-6xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         {/* Left sidebar */}
         <GgSidebar items={sidebarItems} currentSlug={slug} />
 

app/books/gg/page.tsx

@@ -31,7 +31,7 @@ export default async function GgPage() {
         <p className="mt-1 text-muted-foreground">{meta.author}</p>
       </PageHeader>
 
-      <main className="max-w-3xl mx-auto px-6 py-8 space-y-8">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
         {/* Description */}
         {meta.description && (
           <p className="text-muted-foreground">{meta.description}</p>

app/books/hkh/[chapter]/page.tsx

@@ -43,7 +43,7 @@ export default async function HkhChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href="/books/hkh"
           className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -58,7 +58,7 @@ export default async function HkhChapterPage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-6xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         {/* Left sidebar */}
         <HkhSidebar items={sidebarItems} currentSlug={slug} />
 

app/books/hkh/page.tsx

@@ -27,7 +27,7 @@ export default async function HkhPage() {
         <p className="mt-1 text-muted-foreground">{meta.author}</p>
       </PageHeader>
 
-      <main className="max-w-3xl mx-auto px-6 py-8 space-y-8">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
         {/* Description */}
         {meta.description && (
           <p className="text-muted-foreground">{meta.description}</p>

app/books/iso/[mantra]/page.tsx

@@ -55,7 +55,7 @@ export default async function IsoMantraPage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href="/books/iso"
           className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -73,7 +73,7 @@ export default async function IsoMantraPage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-6xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         {/* Left sidebar */}
         <IsoSidebar items={sidebarItems} currentSlug={slug} />
 

app/books/iso/page.tsx

@@ -35,7 +35,7 @@ export default async function IsoPage() {
         <p className="mt-1 text-muted-foreground">{meta.author}</p>
       </PageHeader>
 
-      <main className="max-w-3xl mx-auto px-6 py-8 space-y-8">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
         {/* Description */}
         {meta.description && (
           <p className="text-muted-foreground">{meta.description}</p>

app/books/kb/[volume]/[slug]/page.tsx

@@ -35,7 +35,7 @@ export default async function KbChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href={`/books/kb/${vol}`}
           className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -50,7 +50,7 @@ export default async function KbChapterPage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-6xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         {/* Left sidebar — chapter index */}
         <ChapterSidebar
           chapters={allChapters}

app/books/kb/[volume]/page.tsx

@@ -37,7 +37,7 @@ export default async function KbVolumePage({
         </h1>
         <p className="mt-1 text-muted-foreground">{chapters.length} chapters</p>
       </PageHeader>
-      <main className="max-w-3xl mx-auto px-6 py-8 space-y-8">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
         {/* Front Matter */}
         {introSegments.length > 0 && (
           <div>

app/books/kb/page.tsx

@@ -31,7 +31,7 @@ export default async function KbPage() {
         <h1 className="mt-3 text-3xl font-bold text-foreground">{title}</h1>
         <p className="mt-1 text-muted-foreground">{author}</p>
       </PageHeader>
-      <main className="max-w-3xl mx-auto px-6 py-8">
+      <main className="max-w-5xl mx-auto px-6 py-8">
         {description && (
           <p className="text-muted-foreground mb-6">{description}</p>
         )}

app/books/lcl/[chapter]/page.tsx

@@ -43,7 +43,7 @@ export default async function LclChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href="/books/lcl"
           className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -58,7 +58,7 @@ export default async function LclChapterPage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-6xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         {/* Left sidebar */}
         <LclSidebar items={sidebarItems} currentSlug={slug} />
 

app/books/lcl/page.tsx

@@ -31,7 +31,7 @@ export default async function LclPage() {
         <p className="mt-1 text-muted-foreground">{meta.author}</p>
       </PageHeader>
 
-      <main className="max-w-3xl mx-auto px-6 py-8 space-y-8">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
         {/* Description */}
         {meta.description && (
           <p className="text-muted-foreground">{meta.description}</p>

app/books/lob/[chapter]/page.tsx

@@ -43,7 +43,7 @@ export default async function LobChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href="/books/lob"
           className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -58,7 +58,7 @@ export default async function LobChapterPage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-6xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         {/* Left sidebar */}
         <LobSidebar items={sidebarItems} currentSlug={slug} />
 

app/books/lob/page.tsx

@@ -27,7 +27,7 @@ export default async function LobPage() {
         <p className="mt-1 text-muted-foreground">{meta.author}</p>
       </PageHeader>
 
-      <main className="max-w-3xl mx-auto px-6 py-8 space-y-8">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
         {/* Description */}
         {meta.description && (
           <p className="text-muted-foreground">{meta.description}</p>

app/books/mg/[chapter]/page.tsx

@@ -43,7 +43,7 @@ export default async function MgChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href="/books/mg"
           className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -58,7 +58,7 @@ export default async function MgChapterPage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-6xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         {/* Left sidebar */}
         <MgSidebar items={sidebarItems} currentSlug={slug} />
 

app/books/mg/page.tsx

@@ -27,7 +27,7 @@ export default async function MgPage() {
         <p className="mt-1 text-muted-foreground">{meta.author}</p>
       </PageHeader>
 
-      <main className="max-w-3xl mx-auto px-6 py-8 space-y-8">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
         {/* Description */}
         {meta.description && (
           <p className="text-muted-foreground">{meta.description}</p>

app/books/mm/[chapter]/[verse]/page.tsx

@@ -151,7 +151,7 @@ export default async function VersePage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href="/books/mm"
           className="text-sm text-muted-foreground hover:text-foreground"
@@ -163,7 +163,7 @@ export default async function VersePage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-7xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         <ChapterViewer
           initialVerse={verse}
           initialVerseNum={requestedVerse}

app/books/mm/[chapter]/page.tsx

@@ -38,7 +38,7 @@ export default async function MmChapterPage({
 
     return (
       <div className="min-h-screen bg-background">
-        <PageHeader sticky wide>
+        <PageHeader sticky>
           <Link
             href="/books/mm"
             className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -50,7 +50,7 @@ export default async function MmChapterPage({
           </h1>
         </PageHeader>
 
-        <main className="max-w-3xl mx-auto px-6 py-8">
+        <main className="max-w-5xl mx-auto px-6 py-8">
           <Card>
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">

app/books/mm/page.tsx

@@ -91,7 +91,7 @@ export default async function MmPage() {
         )}
       </PageHeader>
 
-      <main className="max-w-3xl mx-auto px-6 py-8 space-y-8">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
         {/* Front Matter */}
         {introduction && (
           <div>

app/books/mog/[chapter]/page.tsx

@@ -45,7 +45,7 @@ export default async function MogChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href="/books/mog"
           className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -60,7 +60,7 @@ export default async function MogChapterPage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-6xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         {/* Left sidebar */}
         <MogSidebar items={sidebarItems} currentSlug={slug} />
 

app/books/mog/page.tsx

@@ -27,7 +27,7 @@ export default async function MogPage() {
         <p className="mt-1 text-muted-foreground">{meta.author}</p>
       </PageHeader>
 
-      <main className="max-w-3xl mx-auto px-6 py-8 space-y-8">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
         {/* Description */}
         {meta.description && (
           <p className="text-muted-foreground">{meta.description}</p>

app/books/nbs/[chapter]/[verse]/page.tsx

@@ -151,7 +151,7 @@ export default async function VersePage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href="/books/nbs"
           className="text-sm text-muted-foreground hover:text-foreground"
@@ -163,7 +163,7 @@ export default async function VersePage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-7xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         <ChapterViewer
           initialVerse={verse}
           initialVerseNum={requestedVerse}

app/books/nbs/[chapter]/page.tsx

@@ -38,7 +38,7 @@ export default async function NbsChapterPage({
 
     return (
       <div className="min-h-screen bg-background">
-        <PageHeader sticky wide>
+        <PageHeader sticky>
           <Link
             href="/books/nbs"
             className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -50,7 +50,7 @@ export default async function NbsChapterPage({
           </h1>
         </PageHeader>
 
-        <main className="max-w-3xl mx-auto px-6 py-8">
+        <main className="max-w-5xl mx-auto px-6 py-8">
           <Card>
             <CardContent className="py-8 px-6 sm:px-8">
               <div className="space-y-4">

app/books/nbs/page.tsx

@@ -91,7 +91,7 @@ export default async function NbsPage() {
         )}
       </PageHeader>
 
-      <main className="max-w-3xl mx-auto px-6 py-8 space-y-8">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
         {/* Front Matter */}
         {introduction && (
           <div>

app/books/nod/[chapter]/page.tsx

@@ -43,7 +43,7 @@ export default async function NodChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href="/books/nod"
           className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -58,7 +58,7 @@ export default async function NodChapterPage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-6xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         {/* Left sidebar */}
         <NodSidebar items={sidebarItems} currentSlug={slug} />
 

app/books/nod/page.tsx

@@ -37,7 +37,7 @@ export default async function NodPage() {
         <p className="mt-1 text-muted-foreground">{meta.author}</p>
       </PageHeader>
 
-      <main className="max-w-3xl mx-auto px-6 py-8 space-y-8">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
         {/* Description */}
         {meta.description && (
           <p className="text-muted-foreground">{meta.description}</p>

app/books/noi/[text]/page.tsx

@@ -55,7 +55,7 @@ export default async function NoiTextPage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href="/books/noi"
           className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -73,7 +73,7 @@ export default async function NoiTextPage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-6xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         {/* Left sidebar */}
         <NoiSidebar items={sidebarItems} currentSlug={slug} />
 

app/books/noi/page.tsx

@@ -32,7 +32,7 @@ export default async function NoiPage() {
         <p className="mt-1 text-muted-foreground">{meta.author}</p>
       </PageHeader>
 
-      <main className="max-w-3xl mx-auto px-6 py-8 space-y-8">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
         {/* Description */}
         {meta.description && (
           <p className="text-muted-foreground">{meta.description}</p>

app/books/ochkm/[chapter]/page.tsx

@@ -43,7 +43,7 @@ export default async function OchkmChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href="/books/ochkm"
           className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -58,7 +58,7 @@ export default async function OchkmChapterPage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-6xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         {/* Left sidebar */}
         <OchkmSidebar items={sidebarItems} currentSlug={slug} />
 

app/books/ochkm/page.tsx

@@ -27,7 +27,7 @@ export default async function OchkmPage() {
         <p className="mt-1 text-muted-foreground">{meta.author}</p>
       </PageHeader>
 
-      <main className="max-w-3xl mx-auto px-6 py-8 space-y-8">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
         {/* Description */}
         {meta.description && (
           <p className="text-muted-foreground">{meta.description}</p>

app/books/owk/[chapter]/page.tsx

@@ -43,7 +43,7 @@ export default async function OwkChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href="/books/owk"
           className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -58,7 +58,7 @@ export default async function OwkChapterPage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-6xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         {/* Left sidebar */}
         <OwkSidebar items={sidebarItems} currentSlug={slug} />
 

app/books/owk/page.tsx

@@ -27,7 +27,7 @@ export default async function OwkPage() {
         <p className="mt-1 text-muted-foreground">{meta.author}</p>
       </PageHeader>
 
-      <main className="max-w-3xl mx-auto px-6 py-8 space-y-8">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
         {/* Description */}
         {meta.description && (
           <p className="text-muted-foreground">{meta.description}</p>

app/books/page.tsx

@@ -155,7 +155,7 @@ export default async function BooksPage() {
         </p>
       </PageHeader>
 
-      <main className="max-w-6xl mx-auto px-6 py-8">
+      <main className="max-w-5xl mx-auto px-6 py-8">
         <BooksGrid books={books} />
       </main>
     </div>

app/books/pk/[chapter]/page.tsx

@@ -40,7 +40,7 @@ export default async function PkChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href="/books/pk"
           className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -55,7 +55,7 @@ export default async function PkChapterPage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-6xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         {/* Left sidebar */}
         <PkSidebar items={sidebarItems} currentSlug={slug} />
 

app/books/pk/page.tsx

@@ -25,7 +25,7 @@ export default async function PkPage() {
         <p className="mt-1 text-muted-foreground">{meta.author}</p>
       </PageHeader>
 
-      <main className="max-w-3xl mx-auto px-6 py-8 space-y-8">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
         {/* Description */}
         {meta.description && (
           <p className="text-muted-foreground">{meta.description}</p>

app/books/poy/[chapter]/page.tsx

@@ -43,7 +43,7 @@ export default async function PoyChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href="/books/poy"
           className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -58,7 +58,7 @@ export default async function PoyChapterPage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-6xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         {/* Left sidebar */}
         <PoySidebar items={sidebarItems} currentSlug={slug} />
 

app/books/poy/page.tsx

@@ -27,7 +27,7 @@ export default async function PoyPage() {
         <p className="mt-1 text-muted-foreground">{meta.author}</p>
       </PageHeader>
 
-      <main className="max-w-3xl mx-auto px-6 py-8 space-y-8">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
         {/* Description */}
         {meta.description && (
           <p className="text-muted-foreground">{meta.description}</p>

app/books/pqpa/[chapter]/page.tsx

@@ -43,7 +43,7 @@ export default async function PqpaChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href="/books/pqpa"
           className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -58,7 +58,7 @@ export default async function PqpaChapterPage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-6xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         {/* Left sidebar */}
         <PqpaSidebar items={sidebarItems} currentSlug={slug} />
 

app/books/pqpa/page.tsx

@@ -31,7 +31,7 @@ export default async function PqpaPage() {
         <p className="mt-1 text-muted-foreground">{meta.author}</p>
       </PageHeader>
 
-      <main className="max-w-3xl mx-auto px-6 py-8 space-y-8">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
         {/* Description */}
         {meta.description && (
           <p className="text-muted-foreground">{meta.description}</p>

app/books/rv/[chapter]/page.tsx

@@ -43,7 +43,7 @@ export default async function RvChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href="/books/rv"
           className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -58,7 +58,7 @@ export default async function RvChapterPage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-6xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         {/* Left sidebar */}
         <RvSidebar items={sidebarItems} currentSlug={slug} />
 

app/books/rv/page.tsx

@@ -27,7 +27,7 @@ export default async function RvPage() {
         <p className="mt-1 text-muted-foreground">{meta.author}</p>
       </PageHeader>
 
-      <main className="max-w-3xl mx-auto px-6 py-8 space-y-8">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
         {/* Description */}
         {meta.description && (
           <p className="text-muted-foreground">{meta.description}</p>

app/books/sb/[canto]/[chapter]/[verse]/page.tsx

@@ -65,7 +65,7 @@ export default async function SbVersePage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href={`/books/sb/${canto}`}
           className="text-sm text-muted-foreground hover:text-foreground"
@@ -77,7 +77,7 @@ export default async function SbVersePage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-7xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         <ChapterViewer
           initialVerse={verseData}
           initialVerseNum={requestedVerse}

app/books/sb/[canto]/page.tsx

@@ -54,7 +54,7 @@ export default async function CantoPage({
           <ExtractedVerseCount count={totalVerses} label="extracted verses" />
         </p>
       </PageHeader>
-      <main className="max-w-3xl mx-auto px-6 py-8">
+      <main className="max-w-5xl mx-auto px-6 py-8">
         <Card className="divide-y divide-border">
           <CardContent className="p-0">
             <ul className="divide-y divide-border">

app/books/sb/page.tsx

@@ -45,7 +45,7 @@ export default async function SbPage() {
         </h1>
         <p className="mt-1 text-muted-foreground">{intro.author}</p>
       </PageHeader>
-      <main className="max-w-3xl mx-auto px-6 py-8">
+      <main className="max-w-5xl mx-auto px-6 py-8">
         <Card className="divide-y divide-border">
           <CardContent className="p-0">
             <ul className="divide-y divide-border">

app/books/sb1962/[chapter]/[verse]/page.tsx

@@ -63,7 +63,7 @@ export default async function VersePage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href="/books/sb1962"
           className="text-sm text-muted-foreground hover:text-foreground"
@@ -75,7 +75,7 @@ export default async function VersePage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-7xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         <ChapterViewer
           initialVerse={verse}
           initialVerseNum={requestedVerse}

app/books/sb1962/page.tsx

@@ -38,7 +38,7 @@ export default async function Sb1962Page() {
         </h1>
         <p className="mt-1 text-muted-foreground">{intro.author}</p>
       </PageHeader>
-      <main className="max-w-3xl mx-auto px-6 py-8">
+      <main className="max-w-5xl mx-auto px-6 py-8">
         <Card className="divide-y divide-border py-0">
           <CardContent className="p-0">
             <ul className="divide-y divide-border">

app/books/ssr/[chapter]/page.tsx

@@ -49,7 +49,7 @@ export default async function SsrChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href="/books/ssr"
           className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -64,7 +64,7 @@ export default async function SsrChapterPage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-6xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         {/* Left sidebar */}
         <SsrSidebar items={sidebarItems} currentSlug={slug} />
 

app/books/ssr/page.tsx

@@ -31,7 +31,7 @@ export default async function SsrPage() {
         <p className="mt-1 text-muted-foreground">{meta.author}</p>
       </PageHeader>
 
-      <main className="max-w-3xl mx-auto px-6 py-8 space-y-8">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
         {/* Description */}
         {meta.description && (
           <p className="text-muted-foreground">{meta.description}</p>

app/books/sva/[chapter]/page.tsx

@@ -50,7 +50,7 @@ export default async function SvaChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href="/books/sva"
           className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -65,7 +65,7 @@ export default async function SvaChapterPage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-6xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         {/* Left sidebar */}
         <SvaSidebar items={sidebarItems} currentSlug={slug} />
 

app/books/sva/page.tsx

@@ -31,7 +31,7 @@ export default async function SvaPage() {
         <p className="mt-1 text-muted-foreground">{meta.author}</p>
       </PageHeader>
 
-      <main className="max-w-3xl mx-auto px-6 py-8 space-y-8">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
         {/* Description */}
         {meta.description && (
           <p className="text-muted-foreground">{meta.description}</p>

app/books/tlc/[chapter]/page.tsx

@@ -43,7 +43,7 @@ export default async function TlcChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href="/books/tlc"
           className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -58,7 +58,7 @@ export default async function TlcChapterPage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-6xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         {/* Left sidebar */}
         <TlcSidebar items={sidebarItems} currentSlug={slug} />
 

app/books/tlc/page.tsx

@@ -35,7 +35,7 @@ export default async function TlcPage() {
         <p className="mt-1 text-muted-foreground">{meta.author}</p>
       </PageHeader>
 
-      <main className="max-w-3xl mx-auto px-6 py-8 space-y-8">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
         {/* Description */}
         {meta.description && (
           <p className="text-muted-foreground">{meta.description}</p>

app/books/tlk/[chapter]/page.tsx

@@ -43,7 +43,7 @@ export default async function TlkChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href="/books/tlk"
           className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -58,7 +58,7 @@ export default async function TlkChapterPage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-6xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         {/* Left sidebar */}
         <TlkSidebar items={sidebarItems} currentSlug={slug} />
 

app/books/tlk/page.tsx

@@ -31,7 +31,7 @@ export default async function TlkPage() {
         <p className="mt-1 text-muted-foreground">{meta.author}</p>
       </PageHeader>
 
-      <main className="max-w-3xl mx-auto px-6 py-8 space-y-8">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
         {/* Description */}
         {meta.description && (
           <p className="text-muted-foreground">{meta.description}</p>

app/books/tqk/[chapter]/page.tsx

@@ -43,7 +43,7 @@ export default async function TqkChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href="/books/tqk"
           className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -58,7 +58,7 @@ export default async function TqkChapterPage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-6xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         {/* Left sidebar */}
         <TqkSidebar items={sidebarItems} currentSlug={slug} />
 

app/books/tqk/page.tsx

@@ -31,7 +31,7 @@ export default async function TqkPage() {
         <p className="mt-1 text-muted-foreground">{meta.author}</p>
       </PageHeader>
 
-      <main className="max-w-3xl mx-auto px-6 py-8 space-y-8">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
         {/* Description */}
         {meta.description && (
           <p className="text-muted-foreground">{meta.description}</p>

app/books/ttp/[chapter]/page.tsx

@@ -43,7 +43,7 @@ export default async function TtpChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href="/books/ttp"
           className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -58,7 +58,7 @@ export default async function TtpChapterPage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-6xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         {/* Left sidebar */}
         <TtpSidebar items={sidebarItems} currentSlug={slug} />
 

app/books/ttp/page.tsx

@@ -25,7 +25,7 @@ export default async function TtpPage() {
         <p className="mt-1 text-muted-foreground">{meta.author}</p>
       </PageHeader>
 
-      <main className="max-w-3xl mx-auto px-6 py-8 space-y-8">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
         {/* Description */}
         {meta.description && (
           <p className="text-muted-foreground">{meta.description}</p>

app/books/va/[chapter]/page.tsx

@@ -36,7 +36,7 @@ export default async function VaChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href="/books/va"
           className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -48,7 +48,7 @@ export default async function VaChapterPage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-6xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         <VaSidebar items={sidebarItems} currentSlug={slug} />
 
         <main className="flex-1 min-w-0 px-6 py-8 space-y-8">

app/books/va/page.tsx

@@ -25,7 +25,7 @@ export default async function VaPage() {
         <p className="mt-1 text-muted-foreground">{meta.author}</p>
       </PageHeader>
 
-      <main className="max-w-3xl mx-auto px-6 py-8 space-y-8">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-8">
         {meta.description && (
           <p className="text-muted-foreground">{meta.description}</p>
         )}