feat: refine letters UI

app/about/page.tsx

@@ -61,7 +61,7 @@ export default function AboutPage() {
         </p>
       </PageHeader>
 
-      <main className="max-w-3xl mx-auto px-6 py-10 space-y-14">
+      <main className="max-w-5xl mx-auto px-6 py-10 space-y-14">
         {/* ---- Mission ---- */}
         <section className="space-y-4">
           <h2 className="text-2xl font-bold text-foreground">Our Mission</h2>

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>
         )}

app/disciples/page.tsx

@@ -88,7 +88,7 @@ export default async function DisciplesPage({
         </p>
       </PageHeader>
 
-      <main className="max-w-6xl mx-auto px-6 py-8">
+      <main className="max-w-5xl mx-auto px-6 py-8">
         <DisciplesBrowser
           initialDisciples={serializedDisciples}
           initialLetter={activeLetter}

app/essays/[slug]/page.tsx

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

app/essays/page.tsx

@@ -38,7 +38,7 @@ export default async function EssaysPage() {
         </p>
       </PageHeader>
 
-      <main className="max-w-6xl mx-auto px-6 py-8">
+      <main className="max-w-5xl mx-auto px-6 py-8">
         <EssaysGrid essays={items} />
       </main>
     </div>

app/glossary/page.tsx

@@ -42,7 +42,7 @@ export default async function GlossaryPage() {
         <p className="mt-1 text-muted-foreground">{data.description}</p>
       </PageHeader>
 
-      <main className="max-w-3xl mx-auto px-6 py-8">
+      <main className="max-w-5xl mx-auto px-6 py-8">
         <GlossaryClient data={data} />
       </main>
     </div>

app/journals/[slug]/[chapter]/page.tsx

@@ -41,7 +41,7 @@ export default async function JournalChapterPage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href={`/journals/${slug}`}
           className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -53,7 +53,7 @@ export default async function JournalChapterPage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-6xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         <ChapterSidebar
           items={sidebarItems}
           currentSlug={chapterSlug}

app/journals/[slug]/page.tsx

@@ -35,7 +35,7 @@ export default async function JournalIndexPage({
         <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>
         )}

app/journals/page.tsx

@@ -21,7 +21,7 @@ export default async function JournalsPage() {
         </p>
       </PageHeader>
 
-      <main className="max-w-6xl mx-auto px-6 py-8">
+      <main className="max-w-5xl mx-auto px-6 py-8">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
           {journals.map((journal) => (
             <Link key={journal.book} href={`/journals/${bookCodeToSlug(journal.book)}`} className="block h-full">

app/letters/[slug]/page.tsx

@@ -42,7 +42,7 @@ export default async function LetterPage({
         </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">
         {/* Top nav */}
         <LetterNav prev={prev} next={next} />
 

app/letters/filter-year-browser.tsx

@@ -0,0 +1,536 @@
+"use client";
+
+import { useState, useMemo, useRef, useEffect } from "react";
+import Link from "next/link";
+import { Card, CardContent } from "@/components/ui/card";
+import { buttonVariants } from "@/components/ui/button";
+import { ReadingSettings } from "@/components/reading-settings";
+import { cn } from "@/lib/utils";
+import { ChevronLeft, ChevronRight, Menu } from "lucide-react";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type LetterItem = {
+  slug: string;
+  recipientDisplay: string;
+  date: string | null;
+  year: number | null;
+  month: number | null;
+  location: string | null;
+};
+
+type YearGroup = {
+  year: number;
+  label: string;
+  count: number;
+  letters: LetterItem[];
+};
+
+type MonthGroup = {
+  month: number;
+  label: string;
+  letters: LetterItem[];
+};
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const MONTH_NAMES = [
+  "",
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+// ---------------------------------------------------------------------------
+// Grouping helpers
+// ---------------------------------------------------------------------------
+
+function buildYearGroups(letters: LetterItem[]): YearGroup[] {
+  const map = new Map<number, LetterItem[]>();
+
+  for (const letter of letters) {
+    const y = letter.year ?? 0;
+    if (!map.has(y)) map.set(y, []);
+    map.get(y)!.push(letter);
+  }
+
+  const groups: YearGroup[] = [];
+
+  // Sorted years first, then undated (0) at the end
+  const years = Array.from(map.keys()).sort((a, b) => a - b);
+  for (const y of years) {
+    if (y === 0) continue;
+    const items = map.get(y)!;
+    groups.push({
+      year: y,
+      label: String(y),
+      count: items.length,
+      letters: items,
+    });
+  }
+  const undated = map.get(0);
+  if (undated && undated.length > 0) {
+    groups.push({
+      year: 0,
+      label: "Undated",
+      count: undated.length,
+      letters: undated,
+    });
+  }
+
+  return groups;
+}
+
+function buildMonthGroups(letters: LetterItem[]): MonthGroup[] {
+  const map = new Map<number, LetterItem[]>();
+
+  for (const letter of letters) {
+    const m =
+      letter.month && letter.month >= 1 && letter.month <= 12
+        ? letter.month
+        : 0;
+    if (!map.has(m)) map.set(m, []);
+    map.get(m)!.push(letter);
+  }
+
+  const groups: MonthGroup[] = [];
+  for (let m = 1; m <= 12; m++) {
+    const items = map.get(m);
+    if (items && items.length > 0) {
+      groups.push({ month: m, label: MONTH_NAMES[m], letters: items });
+    }
+  }
+  const unknown = map.get(0);
+  if (unknown && unknown.length > 0) {
+    groups.push({ month: 0, label: "Unknown Month", letters: unknown });
+  }
+
+  return groups;
+}
+
+// ---------------------------------------------------------------------------
+// Year Sidebar — matches book chapter sidebar
+// ---------------------------------------------------------------------------
+
+function YearSidebar({
+  groups,
+  activeYear,
+  onSelect,
+}: {
+  groups: YearGroup[];
+  activeYear: number;
+  onSelect: (year: number) => void;
+}) {
+  return (
+    <aside className="hidden lg:block w-56 shrink-0 sticky top-[89px] self-start max-h-[calc(100vh-89px)] overflow-y-auto py-8 pr-4">
+      <h2 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-3 px-2">
+        Years
+      </h2>
+      <nav className="flex flex-col gap-0.5">
+        {groups.map((g) => {
+          const isActive = g.year === activeYear;
+          return (
+            <button
+              key={g.year}
+              onClick={() => onSelect(g.year)}
+              className={cn(
+                "flex items-center justify-between gap-2 px-2 py-1.5 rounded-md text-sm transition-colors text-left",
+                isActive
+                  ? "bg-primary/10 text-primary font-medium"
+                  : "text-muted-foreground hover:bg-muted hover:text-foreground",
+              )}
+            >
+              <span className="truncate">{g.label}</span>
+              <span
+                className={cn(
+                  "text-xs tabular-nums shrink-0",
+                  isActive ? "text-primary/70" : "text-muted-foreground/60",
+                )}
+              >
+                {g.count}
+              </span>
+            </button>
+          );
+        })}
+      </nav>
+    </aside>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Mobile drawer — matches MobileNav
+// ---------------------------------------------------------------------------
+
+function YearMobileNav({
+  groups,
+  activeYear,
+  onSelect,
+  title,
+}: {
+  groups: YearGroup[];
+  activeYear: number;
+  onSelect: (year: number) => void;
+  title: string;
+}) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Drawer open={open} onOpenChange={setOpen} direction="left">
+      <DrawerTrigger
+        className={cn(
+          buttonVariants({ variant: "outline", size: "sm" }),
+          "lg:hidden gap-1.5",
+        )}
+      >
+        <Menu className="size-4" />
+        <span className="hidden sm:inline">Years</span>
+      </DrawerTrigger>
+      <DrawerContent direction="left" className="h-full">
+        <DrawerHeader className="text-left border-b border-border pb-4 mb-2">
+          <DrawerTitle>{title}</DrawerTitle>
+        </DrawerHeader>
+        <nav className="overflow-y-auto px-4 pb-6 pt-2">
+          <div className="flex flex-col gap-0.5">
+            {groups.map((g) => {
+              const isActive = g.year === activeYear;
+              return (
+                <DrawerClose key={g.year} asChild>
+                  <button
+                    onClick={() => {
+                      onSelect(g.year);
+                      setOpen(false);
+                    }}
+                    className={cn(
+                      "flex items-center justify-between gap-2 px-2 py-2 rounded-md text-sm transition-colors text-left",
+                      isActive
+                        ? "bg-primary/10 text-primary font-medium"
+                        : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                    )}
+                  >
+                    <span>{g.label}</span>
+                    <span
+                      className={cn(
+                        "text-xs tabular-nums",
+                        isActive
+                          ? "text-primary/70"
+                          : "text-muted-foreground/60",
+                      )}
+                    >
+                      {g.count}
+                    </span>
+                  </button>
+                </DrawerClose>
+              );
+            })}
+          </div>
+        </nav>
+      </DrawerContent>
+    </Drawer>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Prev / Next nav — matches BbdNav
+// ---------------------------------------------------------------------------
+
+function YearNav({
+  prev,
+  next,
+  groups,
+  activeYear,
+  onSelect,
+  drawerTitle,
+}: {
+  prev: YearGroup | null;
+  next: YearGroup | null;
+  groups: YearGroup[];
+  activeYear: number;
+  onSelect: (year: number) => void;
+  drawerTitle: string;
+}) {
+  return (
+    <div className="flex items-center justify-between gap-3">
+      <div className="flex items-center gap-2">
+        <YearMobileNav
+          groups={groups}
+          activeYear={activeYear}
+          onSelect={onSelect}
+          title={drawerTitle}
+        />
+
+        {prev ? (
+          <button
+            onClick={() => onSelect(prev.year)}
+            className={cn(
+              buttonVariants({ variant: "outline", size: "sm" }),
+              "gap-1.5",
+            )}
+          >
+            <ChevronLeft className="size-4" />
+            <span className="hidden sm:inline truncate max-w-[180px]">
+              {prev.label}
+            </span>
+            <span className="sm:hidden">Previous</span>
+          </button>
+        ) : (
+          <div className="hidden lg:block" />
+        )}
+      </div>
+
+      {next ? (
+        <button
+          onClick={() => onSelect(next.year)}
+          className={cn(
+            buttonVariants({ variant: "outline", size: "sm" }),
+            "gap-1.5",
+          )}
+        >
+          <span className="hidden sm:inline truncate max-w-[180px]">
+            {next.label}
+          </span>
+          <span className="sm:hidden">Next</span>
+          <ChevronRight className="size-4" />
+        </button>
+      ) : (
+        <div />
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Month section — collapsible group of letters for a single month
+// ---------------------------------------------------------------------------
+
+function MonthSection({
+  group,
+  defaultOpen,
+}: {
+  group: MonthGroup;
+  defaultOpen: boolean;
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+
+  return (
+    <div>
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-3 w-full px-5 py-3 text-left hover:bg-muted/50 transition-colors"
+      >
+        <ChevronRight
+          className={cn(
+            "size-4 text-muted-foreground shrink-0 transition-transform",
+            open && "rotate-90",
+          )}
+        />
+        <span className="font-semibold text-foreground text-sm">
+          {group.label}
+        </span>
+        <span className="text-xs text-muted-foreground tabular-nums">
+          {group.letters.length}{" "}
+          {group.letters.length === 1 ? "letter" : "letters"}
+        </span>
+      </button>
+
+      {open && (
+        <ul className="divide-y divide-border">
+          {group.letters.map((letter) => (
+            <li key={letter.slug}>
+              <Link
+                href={`/letters/${letter.slug}`}
+                className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 pl-12 py-3.5 gap-1 sm:gap-4 hover:bg-muted transition-colors"
+              >
+                <div className="min-w-0 flex-1">
+                  <p className="font-medium text-foreground text-sm">
+                    To: {letter.recipientDisplay}
+                  </p>
+                  <p className="text-xs text-muted-foreground mt-0.5">
+                    {letter.date || "Undated"}
+                    {letter.location ? ` · ${letter.location}` : ""}
+                  </p>
+                </div>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Main component — header + sidebar (years) + content (month-grouped letters)
+//
+// Props:
+//   letters     — all letters for this filter (recipient or location)
+//   filterName  — display name for the filter ("Mukunda", "New York", etc.)
+//   filterType  — "recipient" | "location" (used for back link and title)
+//   totalCount  — total letter count
+// ---------------------------------------------------------------------------
+
+export function FilterYearBrowser({
+  letters,
+  filterName,
+  filterType,
+  totalCount,
+}: {
+  letters: LetterItem[];
+  filterName: string;
+  filterType: "recipient" | "location";
+  totalCount: number;
+}) {
+  const yearGroups = useMemo(() => buildYearGroups(letters), [letters]);
+
+  const [activeYear, setActiveYear] = useState<number>(
+    yearGroups.length > 0 ? yearGroups[0].year : 0,
+  );
+
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  // Keep active year valid
+  useEffect(() => {
+    if (
+      yearGroups.length > 0 &&
+      !yearGroups.find((g) => g.year === activeYear)
+    ) {
+      setActiveYear(yearGroups[0].year);
+    }
+  }, [yearGroups, activeYear]);
+
+  const handleYearSelect = (year: number) => {
+    setActiveYear(year);
+    contentRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+  };
+
+  // Active group + neighbors
+  const activeIdx = yearGroups.findIndex((g) => g.year === activeYear);
+  const activeGroup = activeIdx >= 0 ? yearGroups[activeIdx] : null;
+  const prev = activeIdx > 0 ? yearGroups[activeIdx - 1] : null;
+  const next =
+    activeIdx >= 0 && activeIdx < yearGroups.length - 1
+      ? yearGroups[activeIdx + 1]
+      : null;
+
+  // Month groups within the active year
+  const monthGroups = useMemo(
+    () => buildMonthGroups(activeGroup?.letters ?? []),
+    [activeGroup],
+  );
+
+  // Header text
+  const backHref =
+    filterType === "recipient"
+      ? "/letters?view=recipient"
+      : "/letters?view=location";
+  const backLabel =
+    filterType === "recipient" ? "Letters by Recipient" : "Letters by Location";
+  const titlePrefix =
+    filterType === "recipient" ? "Letters to" : "Letters from";
+  const drawerTitle = `${titlePrefix} ${filterName}`;
+  const activeYearLabel = activeGroup?.label ?? "Unknown";
+
+  return (
+    <>
+      {/* Header */}
+      <header className="border-b border-border bg-card px-6 py-4 sticky top-0 z-20">
+        <div className="max-w-5xl mx-auto flex items-start justify-between gap-4">
+          <div className="flex-1 min-w-0">
+            <Link
+              href={backHref}
+              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+            >
+              &larr; {backLabel}
+            </Link>
+            <h1 className="mt-3 text-2xl font-bold text-foreground">
+              <span className="text-primary">
+                {titlePrefix} {filterName}:{" "}
+              </span>
+              {activeYearLabel}
+            </h1>
+            <p className="mt-1 text-muted-foreground">
+              {activeGroup?.count ?? 0}{" "}
+              {(activeGroup?.count ?? 0) === 1 ? "letter" : "letters"} in{" "}
+              {activeYearLabel} · {totalCount} total
+            </p>
+          </div>
+          <div className="shrink-0 pt-1">
+            <ReadingSettings />
+          </div>
+        </div>
+      </header>
+
+      {/* Sidebar + Main */}
+      <div className="max-w-5xl mx-auto flex">
+        {/* Left sidebar — years */}
+        <YearSidebar
+          groups={yearGroups}
+          activeYear={activeYear}
+          onSelect={handleYearSelect}
+        />
+
+        {/* Main content */}
+        <main ref={contentRef} className="flex-1 min-w-0 px-6 py-8 space-y-8">
+          {/* Top navigation */}
+          <YearNav
+            prev={prev}
+            next={next}
+            groups={yearGroups}
+            activeYear={activeYear}
+            onSelect={handleYearSelect}
+            drawerTitle={drawerTitle}
+          />
+
+          {/* Content — letters grouped by month */}
+          {monthGroups.length === 0 ? (
+            <div className="py-12 text-center text-muted-foreground">
+              <p className="text-lg font-medium">No letters for this year</p>
+            </div>
+          ) : (
+            <Card className="overflow-hidden">
+              <CardContent className="p-0 divide-y divide-border">
+                {monthGroups.map((mg, i) => (
+                  <MonthSection
+                    key={mg.month}
+                    group={mg}
+                    defaultOpen={i === 0 || monthGroups.length <= 3}
+                  />
+                ))}
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Bottom navigation */}
+          <YearNav
+            prev={prev}
+            next={next}
+            groups={yearGroups}
+            activeYear={activeYear}
+            onSelect={handleYearSelect}
+            drawerTitle={drawerTitle}
+          />
+        </main>
+      </div>
+    </>
+  );
+}

app/letters/location/[name]/page.tsx

@@ -1,10 +1,8 @@
 export const dynamic = "force-dynamic";
 
-import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getLettersByLocation } from "@/lib/letters";
-import { PageHeader } from "@/components/page-header";
+import { FilterYearBrowser } from "../../filter-year-browser";
-import { Card, CardContent } from "@/components/ui/card";
 
 export default async function LettersByLocationPage({
   params,
@@ -17,48 +15,23 @@ export default async function LettersByLocationPage({
   const letters = await getLettersByLocation(name);
   if (letters.length === 0) notFound();
 
+  const serialized = letters.map((l) => ({
+    slug: l.slug,
+    recipientDisplay: l.recipientDisplay,
+    date: l.date,
+    year: l.year,
+    month: l.month,
+    location: l.location,
+  }));
+
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader>
+      <FilterYearBrowser
-        <Link
+        letters={serialized}
-          href="/letters?view=location"
+        filterName={name}
-          className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+        filterType="location"
-        >
+        totalCount={letters.length}
-          &larr; Letters by Location
+      />
-        </Link>
-        <h1 className="mt-3 text-3xl font-bold text-foreground">
-          Letters from {name}
-        </h1>
-        <p className="mt-1 text-muted-foreground">
-          {letters.length} {letters.length === 1 ? "letter" : "letters"}
-        </p>
-      </PageHeader>
-
-      <main className="max-w-3xl mx-auto px-6 py-8">
-        <Card className="divide-y divide-border">
-          <CardContent className="p-0">
-            <ul className="divide-y divide-border">
-              {letters.map((letter) => (
-                <li key={letter.slug}>
-                  <Link
-                    href={`/letters/${letter.slug}`}
-                    className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-4 hover:bg-muted transition-colors"
-                  >
-                    <div className="min-w-0">
-                      <p className="font-medium text-foreground">
-                        To: {letter.recipientDisplay}
-                      </p>
-                      <p className="text-sm text-muted-foreground">
-                        {letter.date || "Undated"}
-                      </p>
-                    </div>
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </CardContent>
-        </Card>
-      </main>
     </div>
   );
 }

app/letters/recipient/[name]/page.tsx

@@ -1,10 +1,8 @@
 export const dynamic = "force-dynamic";
 
-import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getLettersByRecipient } from "@/lib/letters";
-import { PageHeader } from "@/components/page-header";
+import { FilterYearBrowser } from "../../filter-year-browser";
-import { Card, CardContent } from "@/components/ui/card";
 
 export default async function LettersByRecipientPage({
   params,
@@ -17,49 +15,23 @@ export default async function LettersByRecipientPage({
   const letters = await getLettersByRecipient(name);
   if (letters.length === 0) notFound();
 
+  const serialized = letters.map((l) => ({
+    slug: l.slug,
+    recipientDisplay: l.recipientDisplay,
+    date: l.date,
+    year: l.year,
+    month: l.month,
+    location: l.location,
+  }));
+
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader>
+      <FilterYearBrowser
-        <Link
+        letters={serialized}
-          href="/letters?view=recipient"
+        filterName={name}
-          className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+        filterType="recipient"
-        >
+        totalCount={letters.length}
-          &larr; Letters by Recipient
+      />
-        </Link>
-        <h1 className="mt-3 text-3xl font-bold text-foreground">
-          Letters to or including {name}
-        </h1>
-        <p className="mt-1 text-muted-foreground">
-          {letters.length} {letters.length === 1 ? "letter" : "letters"}
-        </p>
-      </PageHeader>
-
-      <main className="max-w-3xl mx-auto px-6 py-8">
-        <Card className="divide-y divide-border">
-          <CardContent className="p-0">
-            <ul className="divide-y divide-border">
-              {letters.map((letter) => (
-                <li key={letter.slug}>
-                  <Link
-                    href={`/letters/${letter.slug}`}
-                    className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-4 hover:bg-muted transition-colors"
-                  >
-                    <div className="min-w-0">
-                      <p className="font-medium text-foreground">
-                        To: {letter.recipientDisplay}
-                      </p>
-                      <p className="text-sm text-muted-foreground">
-                        {letter.date || "Undated"}
-                        {letter.location ? ` · ${letter.location}` : ""}
-                      </p>
-                    </div>
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </CardContent>
-        </Card>
-      </main>
     </div>
   );
 }

app/letters/year/[year]/page.tsx

@@ -1,10 +1,8 @@
 export const dynamic = "force-dynamic";
 
-import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getLettersByYear } from "@/lib/letters";
-import { PageHeader } from "@/components/page-header";
+import { YearMonthBrowser } from "./year-month-browser";
-import { Card, CardContent } from "@/components/ui/card";
 
 export default async function LettersByYearPage({
   params,
@@ -18,49 +16,22 @@ export default async function LettersByYearPage({
   const letters = await getLettersByYear(year);
   if (letters.length === 0) notFound();
 
+  const serialized = letters.map((l) => ({
+    slug: l.slug,
+    recipientDisplay: l.recipientDisplay,
+    date: l.date,
+    year: l.year,
+    month: l.month,
+    location: l.location,
+  }));
+
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader>
+      <YearMonthBrowser
-        <Link
+        letters={serialized}
-          href="/letters?view=year"
+        year={year}
-          className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+        totalCount={letters.length}
-        >
+      />
-          &larr; Letters by Year
-        </Link>
-        <h1 className="mt-3 text-3xl font-bold text-foreground">
-          Letters from {year}
-        </h1>
-        <p className="mt-1 text-muted-foreground">
-          {letters.length} {letters.length === 1 ? "letter" : "letters"}
-        </p>
-      </PageHeader>
-
-      <main className="max-w-3xl mx-auto px-6 py-8">
-        <Card className="divide-y divide-border">
-          <CardContent className="p-0">
-            <ul className="divide-y divide-border">
-              {letters.map((letter) => (
-                <li key={letter.slug}>
-                  <Link
-                    href={`/letters/${letter.slug}`}
-                    className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-4 hover:bg-muted transition-colors"
-                  >
-                    <div className="min-w-0">
-                      <p className="font-medium text-foreground">
-                        To: {letter.recipientDisplay}
-                      </p>
-                      <p className="text-sm text-muted-foreground">
-                        {letter.date}
-                        {letter.location ? ` · ${letter.location}` : ""}
-                      </p>
-                    </div>
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </CardContent>
-        </Card>
-      </main>
     </div>
   );
 }

app/letters/year/[year]/year-month-browser.tsx

@@ -0,0 +1,451 @@
+"use client";
+
+import { useState, useMemo, useRef, useEffect } from "react";
+import Link from "next/link";
+import { Card, CardContent } from "@/components/ui/card";
+import { buttonVariants } from "@/components/ui/button";
+import { ReadingSettings } from "@/components/reading-settings";
+import { cn } from "@/lib/utils";
+import { ChevronLeft, ChevronRight, Menu } from "lucide-react";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type LetterItem = {
+  slug: string;
+  recipientDisplay: string;
+  date: string | null;
+  year: number | null;
+  month: number | null;
+  location: string | null;
+};
+
+type MonthGroup = {
+  month: number;
+  label: string;
+  shortLabel: string;
+  count: number;
+  letters: LetterItem[];
+};
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const MONTH_NAMES = [
+  "",
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+const MONTH_SHORT = [
+  "",
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec",
+];
+
+// ---------------------------------------------------------------------------
+// Build month groups from flat letter list
+// ---------------------------------------------------------------------------
+
+function buildMonthGroups(letters: LetterItem[]): MonthGroup[] {
+  const map = new Map<number, LetterItem[]>();
+
+  for (const letter of letters) {
+    const m =
+      letter.month && letter.month >= 1 && letter.month <= 12
+        ? letter.month
+        : 0;
+    if (!map.has(m)) map.set(m, []);
+    map.get(m)!.push(letter);
+  }
+
+  const groups: MonthGroup[] = [];
+  for (let m = 1; m <= 12; m++) {
+    const items = map.get(m);
+    if (items && items.length > 0) {
+      groups.push({
+        month: m,
+        label: MONTH_NAMES[m],
+        shortLabel: MONTH_SHORT[m],
+        count: items.length,
+        letters: items,
+      });
+    }
+  }
+  const unknown = map.get(0);
+  if (unknown && unknown.length > 0) {
+    groups.push({
+      month: 0,
+      label: "Unknown Month",
+      shortLabel: "Unknown",
+      count: unknown.length,
+      letters: unknown,
+    });
+  }
+
+  return groups;
+}
+
+// ---------------------------------------------------------------------------
+// Sidebar — matches book chapter sidebar
+// ---------------------------------------------------------------------------
+
+function MonthSidebar({
+  groups,
+  activeMonth,
+  onSelect,
+}: {
+  groups: MonthGroup[];
+  activeMonth: number;
+  onSelect: (month: number) => void;
+}) {
+  return (
+    <aside className="hidden lg:block w-56 shrink-0 sticky top-[89px] self-start max-h-[calc(100vh-89px)] overflow-y-auto py-8 pr-4">
+      <h2 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-3 px-2">
+        Months
+      </h2>
+      <nav className="flex flex-col gap-0.5">
+        {groups.map((g) => {
+          const isActive = g.month === activeMonth;
+          return (
+            <button
+              key={g.month}
+              onClick={() => onSelect(g.month)}
+              className={cn(
+                "flex items-center justify-between gap-2 px-2 py-1.5 rounded-md text-sm transition-colors text-left",
+                isActive
+                  ? "bg-primary/10 text-primary font-medium"
+                  : "text-muted-foreground hover:bg-muted hover:text-foreground",
+              )}
+            >
+              <span className="truncate">{g.label}</span>
+              <span
+                className={cn(
+                  "text-xs tabular-nums shrink-0",
+                  isActive ? "text-primary/70" : "text-muted-foreground/60",
+                )}
+              >
+                {g.count}
+              </span>
+            </button>
+          );
+        })}
+      </nav>
+    </aside>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Mobile drawer — matches MobileNav
+// ---------------------------------------------------------------------------
+
+function MonthMobileNav({
+  groups,
+  activeMonth,
+  onSelect,
+  year,
+}: {
+  groups: MonthGroup[];
+  activeMonth: number;
+  onSelect: (month: number) => void;
+  year: number;
+}) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Drawer open={open} onOpenChange={setOpen} direction="left">
+      <DrawerTrigger
+        className={cn(
+          buttonVariants({ variant: "outline", size: "sm" }),
+          "lg:hidden gap-1.5",
+        )}
+      >
+        <Menu className="size-4" />
+        <span className="hidden sm:inline">Months</span>
+      </DrawerTrigger>
+      <DrawerContent direction="left" className="h-full">
+        <DrawerHeader className="text-left border-b border-border pb-4 mb-2">
+          <DrawerTitle>Letters from {year}</DrawerTitle>
+        </DrawerHeader>
+        <nav className="overflow-y-auto px-4 pb-6 pt-2">
+          <div className="flex flex-col gap-0.5">
+            {groups.map((g) => {
+              const isActive = g.month === activeMonth;
+              return (
+                <DrawerClose key={g.month} asChild>
+                  <button
+                    onClick={() => {
+                      onSelect(g.month);
+                      setOpen(false);
+                    }}
+                    className={cn(
+                      "flex items-center justify-between gap-2 px-2 py-2 rounded-md text-sm transition-colors text-left",
+                      isActive
+                        ? "bg-primary/10 text-primary font-medium"
+                        : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                    )}
+                  >
+                    <span>{g.label}</span>
+                    <span
+                      className={cn(
+                        "text-xs tabular-nums",
+                        isActive
+                          ? "text-primary/70"
+                          : "text-muted-foreground/60",
+                      )}
+                    >
+                      {g.count}
+                    </span>
+                  </button>
+                </DrawerClose>
+              );
+            })}
+          </div>
+        </nav>
+      </DrawerContent>
+    </Drawer>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Prev / Next nav — matches BbdNav
+// ---------------------------------------------------------------------------
+
+function MonthNav({
+  prev,
+  next,
+  groups,
+  activeMonth,
+  onSelect,
+  year,
+}: {
+  prev: MonthGroup | null;
+  next: MonthGroup | null;
+  groups: MonthGroup[];
+  activeMonth: number;
+  onSelect: (month: number) => void;
+  year: number;
+}) {
+  return (
+    <div className="flex items-center justify-between gap-3">
+      <div className="flex items-center gap-2">
+        <MonthMobileNav
+          groups={groups}
+          activeMonth={activeMonth}
+          onSelect={onSelect}
+          year={year}
+        />
+
+        {prev ? (
+          <button
+            onClick={() => onSelect(prev.month)}
+            className={cn(
+              buttonVariants({ variant: "outline", size: "sm" }),
+              "gap-1.5",
+            )}
+          >
+            <ChevronLeft className="size-4" />
+            <span className="hidden sm:inline truncate max-w-[180px]">
+              {prev.shortLabel}
+            </span>
+            <span className="sm:hidden">Previous</span>
+          </button>
+        ) : (
+          <div className="hidden lg:block" />
+        )}
+      </div>
+
+      {next ? (
+        <button
+          onClick={() => onSelect(next.month)}
+          className={cn(
+            buttonVariants({ variant: "outline", size: "sm" }),
+            "gap-1.5",
+          )}
+        >
+          <span className="hidden sm:inline truncate max-w-[180px]">
+            {next.shortLabel}
+          </span>
+          <span className="sm:hidden">Next</span>
+          <ChevronRight className="size-4" />
+        </button>
+      ) : (
+        <div />
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Main component — renders header + sidebar + content (entire page layout)
+// ---------------------------------------------------------------------------
+
+export function YearMonthBrowser({
+  letters,
+  year,
+  totalCount,
+}: {
+  letters: LetterItem[];
+  year: number;
+  totalCount: number;
+}) {
+  const allGroups = useMemo(() => buildMonthGroups(letters), [letters]);
+
+  const [activeMonth, setActiveMonth] = useState<number>(
+    allGroups.length > 0 ? allGroups[0].month : 1,
+  );
+
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  // Keep active month valid
+  useEffect(() => {
+    if (
+      allGroups.length > 0 &&
+      !allGroups.find((g) => g.month === activeMonth)
+    ) {
+      setActiveMonth(allGroups[0].month);
+    }
+  }, [allGroups, activeMonth]);
+
+  const handleMonthSelect = (month: number) => {
+    setActiveMonth(month);
+    contentRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+  };
+
+  // Active group + neighbors
+  const activeIdx = allGroups.findIndex((g) => g.month === activeMonth);
+  const activeGroup = activeIdx >= 0 ? allGroups[activeIdx] : null;
+  const prev = activeIdx > 0 ? allGroups[activeIdx - 1] : null;
+  const next =
+    activeIdx >= 0 && activeIdx < allGroups.length - 1
+      ? allGroups[activeIdx + 1]
+      : null;
+
+  const activeLetters = activeGroup?.letters ?? [];
+  const activeLabel = activeGroup?.label ?? "Unknown Month";
+
+  return (
+    <>
+      {/* Header */}
+      <header className="border-b border-border bg-card px-6 py-4 sticky top-0 z-20">
+        <div className="max-w-5xl mx-auto flex items-start justify-between gap-4">
+          <div className="flex-1 min-w-0">
+            <Link
+              href="/letters?view=year"
+              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+            >
+              &larr; Letters by Year
+            </Link>
+            <h1 className="mt-3 text-2xl font-bold text-foreground">
+              <span className="text-primary">Letters: </span>
+              {activeLabel} {year}
+            </h1>
+            <p className="mt-1 text-muted-foreground">
+              {activeGroup?.count ?? 0}{" "}
+              {(activeGroup?.count ?? 0) === 1 ? "letter" : "letters"} ·{" "}
+              {totalCount} total in {year}
+            </p>
+          </div>
+          <div className="shrink-0 pt-1">
+            <ReadingSettings />
+          </div>
+        </div>
+      </header>
+
+      {/* Sidebar + Main */}
+      <div className="max-w-5xl mx-auto flex">
+        {/* Left sidebar */}
+        <MonthSidebar
+          groups={allGroups}
+          activeMonth={activeMonth}
+          onSelect={handleMonthSelect}
+        />
+
+        {/* Main content */}
+        <main ref={contentRef} className="flex-1 min-w-0 px-6 py-8 space-y-8">
+          {/* Top navigation */}
+          <MonthNav
+            prev={prev}
+            next={next}
+            groups={allGroups}
+            activeMonth={activeMonth}
+            onSelect={handleMonthSelect}
+            year={year}
+          />
+
+          {/* Content */}
+          {activeLetters.length === 0 ? (
+            <div className="py-12 text-center text-muted-foreground">
+              <p className="text-lg font-medium">No letters for this month</p>
+            </div>
+          ) : (
+            <Card>
+              <CardContent className="p-0">
+                <ul className="divide-y divide-border">
+                  {activeLetters.map((letter) => (
+                    <li key={letter.slug}>
+                      <Link
+                        href={`/letters/${letter.slug}`}
+                        className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-4 hover:bg-muted transition-colors"
+                      >
+                        <div className="min-w-0">
+                          <p className="font-medium text-foreground">
+                            To: {letter.recipientDisplay}
+                          </p>
+                          <p className="text-sm text-muted-foreground">
+                            {letter.date || "Undated"}
+                            {letter.location ? ` · ${letter.location}` : ""}
+                          </p>
+                        </div>
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Bottom navigation */}
+          <MonthNav
+            prev={prev}
+            next={next}
+            groups={allGroups}
+            activeMonth={activeMonth}
+            onSelect={handleMonthSelect}
+            year={year}
+          />
+        </main>
+      </div>
+    </>
+  );
+}

app/magazines/[slug]/[issue]/page.tsx

@@ -40,7 +40,7 @@ export default async function MagazineIssuePage({
 
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader sticky wide>
+      <PageHeader sticky>
         <Link
           href={`/magazines/${slug}`}
           className="text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -52,7 +52,7 @@ export default async function MagazineIssuePage({
         </h1>
       </PageHeader>
 
-      <div className="w-full md:max-w-6xl mx-auto flex">
+      <div className="max-w-5xl mx-auto flex">
         <IssueSidebar
           items={sidebarItems}
           currentSlug={issueSlug}

app/magazines/[slug]/page.tsx

@@ -35,7 +35,7 @@ export default async function MagazineIndexPage({
         <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>
         )}

app/magazines/page.tsx

@@ -52,7 +52,7 @@ export default async function MagazinesPage() {
         </p>
       </PageHeader>
 
-      <main className="max-w-6xl mx-auto px-6 py-8 space-y-10">
+      <main className="max-w-5xl mx-auto px-6 py-8 space-y-10">
         {sortedGroups.map((group) => (
           <div key={group}>
             {showGroupHeadings && (

app/other-documents/[slug]/[chapter]/page.tsx

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

app/other-documents/[slug]/page.tsx

@@ -32,7 +32,7 @@ export default async function OtherDocumentIndexPage({
         <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/other-documents/page.tsx

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

app/page.tsx

@@ -30,7 +30,7 @@ export default function Home() {
         <Logo height={56} className="mb-1" />
       </PageHeader>
 
-      <main className="max-w-6xl mx-auto px-6 py-8">
+      <main className="max-w-5xl mx-auto px-6 py-8">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
           {/* Structured Books (JSON) */}
           <Link href="/books" className="block group h-full">