diff --git a/src/app/api/public/posts/route.ts b/src/app/api/public/posts/route.ts
index e380f15..03237bb 100644
--- a/src/app/api/public/posts/route.ts
+++ b/src/app/api/public/posts/route.ts
@@ -3,7 +3,10 @@ import { getLatestImportedArticles } from "@/lib/articles/legacy-source";
 
 export const revalidate = 300;
 
-const MAX_LIMIT = 200;
+// Homepage feed now renders every imported post; pagination + infinite-
+// scroll happen client-side over the full set. Keep an absolute ceiling
+// only as a safety valve, not a UX cap.
+const MAX_LIMIT = 10000;
 const DEFAULT_LIMIT = 100;
 
 export async function GET(request: Request) {
diff --git a/src/app/home-page/components/ArticleFeed.tsx b/src/app/home-page/components/ArticleFeed.tsx
index 76f1fb6..b561736 100644
--- a/src/app/home-page/components/ArticleFeed.tsx
+++ b/src/app/home-page/components/ArticleFeed.tsx
@@ -26,7 +26,7 @@ interface ArticleItem {
 
 
 
-const ALL_CATEGORIES = ["All", "BROADCAST", "FEATURED", "POST PRODUCTION", "ANIMATION"];
+const ALL_CATEGORIES = ["All", "BROADCAST", "POST PRODUCTION", "ANIMATION"];
 const SOURCE_FILTERS = ["All", "Live", "Imported"] as const;
 type SourceFilter = typeof SOURCE_FILTERS[number];
 type FeedMode = "pagination" | "infinite";
@@ -94,7 +94,7 @@ export default function ArticleFeed() {
     let cancelled = false;
     (async () => {
       try {
-        const res = await fetch("/api/public/posts?limit=200", { cache: "no-store" });
+        const res = await fetch("/api/public/posts?limit=5000", { cache: "no-store" });
         if (!res.ok) throw new Error(`HTTP ${res.status}`);
         const json = await res.json();
         const items = Array.isArray(json?.items) ? (json.items as ArticleItem[]) : [];
@@ -613,11 +613,19 @@ export default function ArticleFeed() {
                         {article?.excerpt}
                       </p>
                       <div className="flex items-center justify-between gap-2">
-                        <div className="flex items-center gap-1 hidden sm:flex">
+                        <div className="hidden sm:flex items-center gap-2 text-xs text-[#666] min-w-0">
                           <PersonIcon size={11} className="text-[#666] flex-shrink-0" />
-                          <span className="font-body text-xs text-[#666]">
+                          <span className="font-body truncate">
                             By {article?.author}
                           </span>
+                          {article?.date && (
+                            <>
+                              <span aria-hidden="true" className="text-[#333]">·</span>
+                              <time className="font-body whitespace-nowrap" dateTime={article.date}>
+                                {article.date}
+                              </time>
+                            </>
+                          )}
                         </div>
                         <Link
                           href={articleHref}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 7d08ef8..78e36ea 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,25 @@
 import React, { Suspense } from 'react';
 import type { Metadata, Viewport } from 'next';
+import { Lora, Inter } from 'next/font/google';
 import '../styles/tailwind.css';
+
+// Self-hosted at build time by next/font — no runtime CDN fetch, no FOIT,
+// no GDPR concern. The two variables are consumed by --font-heading and
+// --font-body in src/styles/tailwind.css with Georgia/Arial fallbacks.
+const lora = Lora({
+  subsets: ['latin'],
+  weight: ['400', '500', '600', '700'],
+  style: ['normal', 'italic'],
+  variable: '--font-serif',
+  display: 'swap',
+});
+
+const inter = Inter({
+  subsets: ['latin'],
+  weight: ['300', '400', '500', '600', '700', '800'],
+  variable: '--font-sans',
+  display: 'swap',
+});
 // SystemStatusBar removed — the "articles indexed / events tracked / [v2.0.0]"
 // strip was eating vertical space without serving readers.
 import AskBBAI from '@/components/AskBBAI';
@@ -81,7 +100,7 @@ export default function RootLayout({
 
 }: Readonly<{children: React.ReactNode;}>) {
   return (
-    <html lang="en">
+    <html lang="en" className={`${lora.variable} ${inter.variable}`}>
       <head>
         {/* hreflang entries removed pending real i18n routes (Phase D). */}
 
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 7d09c02..d5d00b2 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -17,9 +17,12 @@
   --color-border: #2a2a2a;
   --color-top-bar: #1a2535;
   --color-sub-nav: #161c28;
-  --font-heading: Georgia, 'Times New Roman', serif;
-  --font-body: Arial, Helvetica, sans-serif;
-  --font-mono: 'Courier New', Courier, monospace;
+  /* --font-serif and --font-sans are injected on <html> by next/font/google
+     (Lora + Inter) in src/app/layout.tsx. The system-font tails are real
+     fallbacks for the brief window before the self-hosted face is ready. */
+  --font-heading: var(--font-serif), Georgia, 'Times New Roman', serif;
+  --font-body: var(--font-sans), -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
   --transition-fast: 0.18s ease;
   --transition-base: 0.25s ease;
   --transition-slow: 0.4s ease;