redesign: Risograph Folio — printed-publication aesthetic

Trade dark-mode AI dashboard for a magazine: warm parchment paper,
halftone dot field, riso-style rust accent, Fraunces italic display
with SOFT/WONK axes, IBM Plex Sans body, JetBrains Mono folio
chrome. Editorial moves throughout:

- Top: thin issue strip + masthead (Vol. I · Issue 02 · Etiya BSS)
- Sidebar: catalog with numbered conversation entries (№ 01 …)
- Empty state: huge italic display "Pose a question." with lede +
margin notes column
- Chat: transcript layout (margin folio | content column), assistant
answers carry rust drop-cap, bibliography for sources, colophon
for spec sheet
- Documents: library catalog with 4-digit folio numbers
- System: colophon page with halftone-textured pull-quote panels and
inverted ink Eval issue review
- Decoration: register marks (✚) at page corners, hairline rules,
italic-on-hover links

app/documents/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { api, ApiError } from "@/lib/api";
+import { api } from "@/lib/api";
 import type { DocumentMeta, ReindexResponse } from "@/lib/types";
 import {
   useMutation,
@@ -54,58 +54,70 @@ export default function DocumentsPage() {
 
   return (
     <div className="flex-1 overflow-y-auto">
-      <div className="container-app py-10 space-y-8">
-        {/* Hero strip */}
-        <header className="flex items-end justify-between flex-wrap gap-4 animate-fade-in">
-          <div>
-            <h1 className="text-display-lg text-ink">
-              Documents <span className="serif-italic text-amber">corpus.</span>
-            </h1>
-            <p className="text-body text-ink-50 mt-2">
-              {data ? (
-                <>
-                  <span className="font-mono text-ink">
-                    {data.count.toLocaleString()}
-                  </span>{" "}
-                  indexed · persistent at{" "}
-                  <span className="font-mono">/data/docs/</span>
-                </>
-              ) : (
-                "Loading…"
-              )}
-            </p>
+      <div className="container-app py-10 space-y-10">
+        {/* Editorial masthead */}
+        <header className="animate-fade-in">
+          <div className="flex items-baseline justify-between mb-3">
+            <span className="folio-chrome">Folio II · Library</span>
+            <span className="folio-chrome">
+              {data ? `${data.count.toLocaleString()} entries` : "Loading…"}
+            </span>
           </div>
-          <div className="flex items-center gap-3">
-            <button
-              onClick={() => reindex.mutate()}
-              disabled={reindex.isPending}
-              className="btn-secondary"
-            >
-              {reindex.isPending ? "Re-indexing…" : "Re-index now"}
-            </button>
-            <button
-              onClick={() => setShowAdd((v) => !v)}
-              className="btn-primary"
+          <h1
+            className="text-ink"
+            style={{
+              fontSize: "clamp(56px, 9vw, 110px)",
+              lineHeight: 0.92,
+              fontWeight: 300,
+              letterSpacing: "-0.04em",
+              fontFamily: "var(--font-fraunces)",
+            }}
+          >
+            The <span className="italic-display text-rust">corpus.</span>
+          </h1>
+          <div className="hairline--double mt-6 animate-rule" />
+          <div className="grid md:grid-cols-[1fr_auto] gap-6 items-end mt-6 animate-stagger-2">
+            <p
+              className="text-ink max-w-[60ch]"
+              style={{
+                fontFamily: "var(--font-fraunces)",
+                fontSize: "20px",
+                lineHeight: 1.45,
+                fontWeight: 300,
+              }}
             >
-              {showAdd ? "Close" : "Add document"}
-            </button>
+              The standing collection of Etiya BSS documents, persisted at{" "}
+              <span className="font-mono text-ink-70">/data/docs/</span>. Use
+              the search to query the catalog, or contribute a new entry.
+            </p>
+            <div className="flex items-center gap-3">
+              <button
+                onClick={() => reindex.mutate()}
+                disabled={reindex.isPending}
+                className="btn-secondary"
+              >
+                {reindex.isPending ? "Re-indexing…" : "Re-index"}
+              </button>
+              <button
+                onClick={() => setShowAdd((v) => !v)}
+                className="btn-rust"
+              >
+                {showAdd ? "Close" : "Add entry"}
+              </button>
+            </div>
           </div>
         </header>
 
         {/* Reindex banner */}
         {reindexResult && (
           <div
-            className="rounded-md p-4 flex items-center justify-between gap-3 animate-fade-up"
-            style={{
-              background: "rgba(93, 214, 168, 0.08)",
-              boxShadow: "0 0 0 1px rgba(93, 214, 168, 0.28)",
-            }}
+            className="card-rust flex items-center justify-between gap-3 animate-fade-up"
           >
-            <div className="text-caption">
-              <span className="text-status-ok font-mono uppercase tracking-[0.12em] mr-3">
-                re-index ok
+            <div>
+              <span className="folio-chrome--rust folio-chrome mr-3">
+                Re-index complete
               </span>
-              <span className="font-mono text-ink-70">
+              <span className="font-mono text-caption text-ink-70">
                 mode={reindexResult.mode ?? "none"} · added=
                 {reindexResult.added} · removed={reindexResult.removed} ·
                 indexed={reindexResult.indexed_count} ·{" "}
@@ -114,62 +126,67 @@ export default function DocumentsPage() {
             </div>
             <button
               onClick={() => setReindexResult(null)}
-              className="text-caption text-ink-50 hover:text-ink"
+              className="folio-chrome hover:text-rust"
             >
-              dismiss
+              Dismiss
             </button>
           </div>
         )}
 
-        {/* Add document panel */}
+        {/* Add entry form */}
         {showAdd && (
           <AddDocumentForm
-            onCreated={() => {
-              qc.invalidateQueries({ queryKey: ["documents"] });
-            }}
+            onCreated={() => qc.invalidateQueries({ queryKey: ["documents"] })}
           />
         )}
 
-        {/* Search + list */}
-        <section className="card animate-fade-up-slow">
-          <div className="flex items-center justify-between gap-4 mb-5 flex-wrap">
-            <div className="relative flex-1 min-w-[260px] max-w-[480px]">
-              <svg
-                className="absolute left-3.5 top-1/2 -translate-y-1/2 text-ink-50"
-                width="14"
-                height="14"
-                viewBox="0 0 14 14"
-                fill="none"
-              >
-                <circle cx="6" cy="6" r="4" stroke="currentColor" strokeWidth="1.4" />
-                <path d="m9.5 9.5 3 3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
-              </svg>
-              <input
-                type="text"
-                placeholder="Search by name or doc_id…"
-                value={filter}
-                onChange={(e) => {
-                  setFilter(e.target.value);
-                  setPage(0);
-                }}
-                className="input-glass !pl-10"
-              />
-            </div>
-            <span className="text-caption text-ink-50 font-mono shrink-0 uppercase tracking-[0.12em]">
+        {/* Search */}
+        <section className="animate-fade-up-slow">
+          <div className="flex items-baseline justify-between mb-3">
+            <span className="folio-chrome">Index</span>
+            <span className="folio-chrome">
               {filtered.length.toLocaleString()} match
               {filtered.length === 1 ? "" : "es"}
             </span>
           </div>
 
-          {error && (
-            <div
-              className="p-4 rounded-md mb-4"
+          <div className="relative max-w-[640px] mb-6">
+            <svg
+              className="absolute left-4 top-1/2 -translate-y-1/2 text-ink-50"
+              width="14"
+              height="14"
+              viewBox="0 0 14 14"
+              fill="none"
+            >
+              <circle cx="6" cy="6" r="4" stroke="currentColor" strokeWidth="1.4" />
+              <path
+                d="m9.5 9.5 3 3"
+                stroke="currentColor"
+                strokeWidth="1.4"
+                strokeLinecap="round"
+              />
+            </svg>
+            <input
+              type="text"
+              placeholder="Query the catalog…"
+              value={filter}
+              onChange={(e) => {
+                setFilter(e.target.value);
+                setPage(0);
+              }}
+              className="input-print !pl-11"
               style={{
-                background: "rgba(255, 122, 122, 0.06)",
-                boxShadow: "0 0 0 1px rgba(255, 122, 122, 0.28)",
+                fontFamily: "var(--font-fraunces)",
+                fontSize: "17px",
+                fontWeight: 400,
               }}
-            >
-              <p className="text-status-err text-body-strong">
+            />
+          </div>
+
+          {error && (
+            <div className="card-rust mb-4">
+              <div className="folio-chrome--rust folio-chrome mb-1">Errata</div>
+              <p className="text-body-strong text-ink">
                 Failed to load documents
               </p>
               <p className="text-caption text-ink-70 mt-1">
@@ -179,54 +196,59 @@ export default function DocumentsPage() {
           )}
 
           {isLoading && (
-            <div className="text-ink-50 text-body py-12 text-center text-shimmer">
-              Loading documents…
+            <div className="text-ink-50 italic-display py-12 text-center" style={{ fontSize: "22px" }}>
+              Loading the catalog…
             </div>
           )}
 
           {visible.length > 0 && (
-            <ul className="divide-y divide-glass-border">
-              {visible.map((d) => (
-                <li
-                  key={d.doc_id}
-                  className="flex items-center justify-between gap-4 py-3.5 group"
-                >
-                  <div className="min-w-0 flex-1">
-                    <div className="text-body-strong text-ink truncate">
-                      {d.name}
+            <ul className="border-t-2 border-ink/30">
+              {visible.map((d, i) => {
+                const folio = String(page * PAGE_SIZE + i + 1).padStart(4, "0");
+                return (
+                  <li
+                    key={d.doc_id}
+                    className="grid grid-cols-[80px_1fr_auto] gap-4 sm:gap-6 py-4 border-b border-ink/12 group"
+                  >
+                    <div className="folio-chrome--ink folio-chrome pt-0.5">
+                      № {folio}
                     </div>
-                    <div className="flex items-center gap-2.5 mt-0.5 text-micro text-ink-50 font-mono uppercase tracking-[0.10em]">
-                      <span className="truncate">{d.doc_id}</span>
-                      <Sep />
-                      <span>{d.length_chars.toLocaleString()} chars</span>
-                      <Sep />
-                      <span>
+                    <div className="min-w-0">
+                      <div
+                        className="italic-display text-ink truncate group-hover:text-rust transition-colors"
+                        style={{ fontSize: "19px", lineHeight: 1.3 }}
+                      >
+                        {d.name}
+                      </div>
+                      <div className="folio-chrome mt-1 truncate">
+                        {d.doc_id} · {d.length_chars.toLocaleString()} chars ·{" "}
                         {new Date(d.created_at * 1000).toLocaleDateString()}
-                      </span>
+                      </div>
                     </div>
-                  </div>
-                  <button
-                    onClick={() => setConfirmDelete(d)}
-                    className="opacity-0 group-hover:opacity-100 transition-opacity text-caption text-status-err hover:bg-status-err-glow px-2.5 py-1 rounded-md"
-                  >
-                    Delete
-                  </button>
-                </li>
-              ))}
+                    <button
+                      onClick={() => setConfirmDelete(d)}
+                      className="opacity-0 group-hover:opacity-100 transition-opacity folio-chrome hover:text-rust"
+                    >
+                      Withdraw
+                    </button>
+                  </li>
+                );
+              })}
             </ul>
           )}
 
           {totalPages > 1 && (
-            <div className="flex items-center justify-between mt-5">
+            <div className="flex items-center justify-between mt-6">
               <button
                 onClick={() => setPage((p) => Math.max(0, p - 1))}
                 disabled={page === 0}
                 className="btn-ghost disabled:opacity-30"
               >
-                ← Prev
+                ← Previous
               </button>
-              <span className="text-caption text-ink-50 font-mono uppercase tracking-[0.12em]">
-                page {page + 1} of {totalPages}
+              <span className="folio-chrome">
+                Folio {String(page + 1).padStart(2, "0")} ·{" "}
+                {String(totalPages).padStart(2, "0")}
               </span>
               <button
                 onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
@@ -256,10 +278,7 @@ function AddDocumentForm({ onCreated }: { onCreated: () => void }) {
   const [name, setName] = useState("");
   const [text, setText] = useState("");
   const [doReindex, setDoReindex] = useState(true);
-  const [feedback, setFeedback] = useState<{
-    kind: "ok" | "err";
-    msg: string;
-  } | null>(null);
+  const [feedback, setFeedback] = useState<{ kind: "ok" | "err"; msg: string } | null>(null);
 
   const create = useMutation({
     mutationFn: async (payload: { text: string; name?: string }) => {
@@ -270,7 +289,7 @@ function AddDocumentForm({ onCreated }: { onCreated: () => void }) {
     onSuccess: (created) => {
       setFeedback({
         kind: "ok",
-        msg: `Added: ${created.name} (${created.doc_id.slice(0, 12)}…)`,
+        msg: `Filed: ${created.name} (${created.doc_id.slice(0, 12)}…)`,
       });
       setText("");
       setName("");
@@ -284,11 +303,23 @@ function AddDocumentForm({ onCreated }: { onCreated: () => void }) {
 
   return (
     <section className="card animate-fade-up">
-      <h2 className="text-display-sm text-ink">
-        Add <span className="serif-italic text-amber">document</span>
+      <div className="flex items-baseline justify-between mb-2">
+        <span className="folio-chrome">Submission · New entry</span>
+      </div>
+      <h2
+        className="text-ink"
+        style={{
+          fontFamily: "var(--font-fraunces)",
+          fontSize: "32px",
+          fontWeight: 500,
+          letterSpacing: "-0.018em",
+        }}
+      >
+        File a new <span className="italic-display text-rust">entry.</span>
       </h2>
-      <p className="text-caption text-ink-50 mt-1">
-        Documents persist immediately; re-indexing syncs them into RAG retrieval.
+      <p className="text-caption text-ink-70 mt-1.5 max-w-[60ch]">
+        Documents persist immediately; re-indexing syncs them into the
+        retrieval atelier.
       </p>
 
       <form
@@ -297,25 +328,25 @@ function AddDocumentForm({ onCreated }: { onCreated: () => void }) {
           if (!text.trim()) return;
           create.mutate({ text: text.trim(), name: name.trim() || undefined });
         }}
-        className="mt-5 space-y-4"
+        className="mt-6 space-y-4"
       >
         <div>
-          <label className="text-caption-strong text-ink block mb-1.5">
-            Name <span className="text-ink-50 font-normal">(optional)</span>
+          <label className="folio-chrome--ink folio-chrome block mb-1.5">
+            Title <span className="text-ink-50 normal-case tracking-normal">(optional)</span>
           </label>
           <input
             type="text"
             value={name}
             onChange={(e) => setName(e.target.value)}
             placeholder="e.g. Customer Onboarding Flow v2"
-            className="input-glass"
+            className="input-print"
             disabled={create.isPending}
           />
         </div>
 
         <div>
-          <label className="text-caption-strong text-ink block mb-1.5">
-            Content
+          <label className="folio-chrome--ink folio-chrome block mb-1.5">
+            Body
           </label>
           <textarea
             value={text}
@@ -323,40 +354,41 @@ function AddDocumentForm({ onCreated }: { onCreated: () => void }) {
             required
             rows={8}
             placeholder="Paste markdown or plain text…"
-            className="input-glass resize-y"
+            className="input-print resize-y"
             disabled={create.isPending}
+            style={{ fontFamily: "var(--font-mono)", fontSize: "13px" }}
           />
-          <p className="text-micro text-ink-50 mt-1 font-mono uppercase tracking-[0.10em]">
+          <p className="folio-chrome mt-1">
             {text.length.toLocaleString()} chars
           </p>
         </div>
 
-        <label className="flex items-center gap-2.5 text-caption text-ink cursor-pointer">
+        <label className="flex items-center gap-2.5 cursor-pointer">
           <input
             type="checkbox"
             checked={doReindex}
             onChange={(e) => setDoReindex(e.target.checked)}
-            className="w-4 h-4 accent-amber"
+            className="w-4 h-4 accent-rust"
           />
-          <span>Auto re-index after add</span>
-          <span className="text-ink-50 text-micro font-mono">
-            (~350ms)
+          <span className="text-caption text-ink">
+            Auto re-index after filing
           </span>
+          <span className="folio-chrome">~350ms</span>
         </label>
 
         <div className="flex items-center gap-4 pt-2">
           <button
             type="submit"
             disabled={create.isPending || !text.trim()}
-            className="btn-primary"
+            className="btn-rust"
           >
-            {create.isPending ? "Saving…" : "Save document"}
+            {create.isPending ? "Filing…" : "File entry"}
           </button>
           {feedback && (
             <span
               className={clsx(
                 "text-caption",
-                feedback.kind === "ok" ? "text-status-ok" : "text-status-err"
+                feedback.kind === "ok" ? "text-status-ok" : "text-rust"
               )}
             >
               {feedback.msg}
@@ -381,23 +413,29 @@ function ConfirmDelete({
 }) {
   return (
     <div
-      className="fixed inset-0 z-50 bg-canvas-deep/70 backdrop-blur-sm flex items-center justify-center p-6 animate-fade-in"
+      className="fixed inset-0 z-50 flex items-center justify-center p-6 animate-fade-in"
+      style={{ background: "rgba(25,23,19,0.32)" }}
       onClick={onCancel}
     >
       <div
         onClick={(e) => e.stopPropagation()}
-        className="glass-strong rounded-lg max-w-[460px] w-full p-7 animate-fade-up"
+        className="card max-w-[460px] w-full animate-fade-up"
+        style={{ background: "var(--paper)" }}
       >
-        <h3 className="text-display-sm">Delete document?</h3>
-        <p className="text-caption text-ink-50 mt-1">This is permanent.</p>
-        <div className="mt-4 p-3 rounded-md bg-glass">
-          <div className="text-body-strong text-ink truncate">{doc.name}</div>
-          <div className="text-micro text-ink-50 font-mono mt-0.5 truncate">
-            {doc.doc_id}
-          </div>
+        <div className="folio-chrome--rust folio-chrome mb-2">
+          Permanent withdrawal
         </div>
-        <p className="text-caption text-ink-50 mt-4">
-          Re-indexing will remove it from /ask_smart retrieval.
+        <h3
+          className="italic-display text-ink"
+          style={{ fontSize: "28px", lineHeight: 1.2 }}
+        >
+          Withdraw entry?
+        </h3>
+        <div className="hairline mt-3 mb-3" />
+        <p className="text-body-strong text-ink truncate">{doc.name}</p>
+        <p className="folio-chrome mt-1 truncate">{doc.doc_id}</p>
+        <p className="text-caption text-ink-70 mt-4">
+          Re-indexing will remove it from retrieval.
         </p>
         <div className="mt-6 flex items-center justify-end gap-3">
           <button onClick={onCancel} className="btn-secondary">
@@ -406,16 +444,12 @@ function ConfirmDelete({
           <button
             onClick={onConfirm}
             disabled={loading}
-            className="btn-danger"
+            className="btn-rust"
           >
-            {loading ? "Deleting…" : "Delete"}
+            {loading ? "Withdrawing…" : "Withdraw"}
           </button>
         </div>
       </div>
     </div>
   );
 }
-
-function Sep() {
-  return <span className="text-ink-30">·</span>;
-}

app/globals.css

@@ -3,151 +3,176 @@
 @tailwind utilities;
 
 /* ───────────────────────────────────────────────────────────────
-   Twilight Atelier — base canvas
+   Risograph Folio — base
    ─────────────────────────────────────────────────────────────── */
 @layer base {
   :root {
-    color-scheme: dark;
+    color-scheme: light;
+    --paper: #f4ede0;
+    --paper-deep: #ebe2d0;
+    --ink: #191713;
+    --rust: #c84d2c;
   }
 
   html,
   body {
-    background: #06070a;
-    color: #f5f3ec;
-    font-family: var(--font-manrope), system-ui, -apple-system, sans-serif;
+    background: var(--paper);
+    color: var(--ink);
+    font-family: var(--font-plex), ui-sans-serif, system-ui, sans-serif;
     font-size: 15px;
-    line-height: 1.6;
+    line-height: 1.65;
     font-weight: 400;
-    font-feature-settings: "ss01", "cv11", "calt";
+    font-feature-settings: "ss01", "ss03", "calt";
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizeLegibility;
   }
 
   body {
-    /* Layered: deep canvas + warm aurora + subtle grain */
+    /* Layered paper:
+       1. base parchment color
+       2. halftone dot pattern (very low opacity)
+       3. warm sun-bleached gradient at top-right
+       4. inked-edge vignette toward bottom-left
+       5. fine paper grain (svg noise) */
     background:
-      radial-gradient(1100px 700px at 78% -10%, rgba(255, 181, 69, 0.12), transparent 65%),
-      radial-gradient(900px 800px at 8% 110%, rgba(98, 70, 255, 0.10), transparent 60%),
-      radial-gradient(1400px 900px at 50% 50%, rgba(20, 24, 40, 0.6), transparent 70%),
-      #06070a;
+      radial-gradient(900px 600px at 92% 0%, rgba(200, 77, 44, 0.07), transparent 60%),
+      radial-gradient(800px 700px at 0% 100%, rgba(25, 23, 19, 0.05), transparent 60%),
+      var(--paper);
     background-attachment: fixed;
     min-height: 100vh;
     overflow-x: hidden;
+    position: relative;
   }
 
-  /* Subtle grain overlay (doesn't capture pointer events) */
+  /* Halftone dot field (decorative; below all content) */
   body::before {
     content: "";
     position: fixed;
     inset: 0;
     pointer-events: none;
     z-index: 0;
-    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1, 0 0 0 0 1, 0 0 0 0 1, 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
-    opacity: 0.65;
-    mix-blend-mode: overlay;
+    background-image: radial-gradient(
+      circle at center,
+      rgba(25, 23, 19, 0.08) 0.7px,
+      transparent 1.4px
+    );
+    background-size: 6px 6px;
+    background-position: 0 0;
+    opacity: 0.55;
+    mask-image: radial-gradient(
+      ellipse 100% 70% at 50% 30%,
+      transparent 0%,
+      black 70%
+    );
+    -webkit-mask-image: radial-gradient(
+      ellipse 100% 70% at 50% 30%,
+      transparent 0%,
+      black 70%
+    );
+  }
+
+  /* Paper grain — very subtle */
+  body::after {
+    content: "";
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' seed='3'/><feColorMatrix values='0 0 0 0 0.10, 0 0 0 0 0.09, 0 0 0 0 0.08, 0 0 0 0.10 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
+    opacity: 0.5;
+    mix-blend-mode: multiply;
   }
 
   ::selection {
-    background: rgba(255, 181, 69, 0.32);
-    color: #fff8e7;
+    background: var(--rust);
+    color: var(--paper);
   }
 
-  /* Custom scrollbar — barely there */
+  /* Hand-set scrollbar (warm, paper-tinted) */
   ::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
+    width: 12px;
+    height: 12px;
   }
   ::-webkit-scrollbar-thumb {
-    background-color: rgba(255, 255, 255, 0.08);
+    background-color: rgba(25, 23, 19, 0.18);
     border-radius: 9999px;
-    border: 2px solid transparent;
+    border: 3px solid var(--paper);
     background-clip: content-box;
   }
   ::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(255, 255, 255, 0.16);
+    background-color: rgba(25, 23, 19, 0.30);
   }
   ::-webkit-scrollbar-track {
     background: transparent;
   }
 
-  /* Focus ring — luminous amber */
   :focus-visible {
-    outline: 2px solid rgba(255, 181, 69, 0.75);
-    outline-offset: 2px;
-    border-radius: 4px;
-  }
-  button:focus-visible,
-  a:focus-visible,
-  input:focus-visible,
-  textarea:focus-visible {
+    outline: 2px solid var(--rust);
     outline-offset: 3px;
   }
 
-  /* Default kerning for headlines */
+  /* Headlines — Fraunces by default for h1/h2/h3 */
   h1,
   h2,
   h3,
   h4 {
+    font-family: var(--font-fraunces), ui-serif, Georgia, serif;
+    font-weight: 500;
     letter-spacing: -0.02em;
+    color: var(--ink);
+  }
+
+  /* Italic links: slip into italic on hover */
+  a {
+    transition: color 0.2s ease, font-style 0s;
   }
 }
 
 /* ───────────────────────────────────────────────────────────────
-   Component grammars
+   Components
    ─────────────────────────────────────────────────────────────── */
 @layer components {
-  /* ── Glass surfaces ─────────────────────────────────────────── */
-  .glass {
-    background: rgba(255, 255, 255, 0.04);
-    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
-      0 0 0 1px rgba(255, 255, 255, 0.08),
-      0 16px 40px -16px rgba(0, 0, 0, 0.6);
-    backdrop-filter: blur(16px) saturate(140%);
-    -webkit-backdrop-filter: blur(16px) saturate(140%);
-  }
-
-  .glass-strong {
-    background: rgba(255, 255, 255, 0.06);
-    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset,
-      0 0 0 1px rgba(255, 255, 255, 0.14),
-      0 28px 80px -24px rgba(0, 0, 0, 0.7);
-    backdrop-filter: blur(20px) saturate(160%);
-    -webkit-backdrop-filter: blur(20px) saturate(160%);
+  /* ── Italic display moments ─────────────────────────────────── */
+  .italic-display {
+    font-family: var(--font-fraunces), ui-serif, Georgia, serif;
+    font-style: italic;
+    font-weight: 400;
+    font-variation-settings: "SOFT" 30, "WONK" 1;
   }
 
-  .glass-elev {
-    background: linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.06) 0%,
-      rgba(255, 255, 255, 0.02) 100%
-    );
-    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset,
-      0 0 0 1px rgba(255, 255, 255, 0.10),
-      0 32px 80px -24px rgba(0, 0, 0, 0.7);
+  /* ── Buttons — flat printed ─────────────────────────────────── */
+  .btn-primary {
+    @apply inline-flex items-center justify-center
+           px-5 py-2.5 rounded-pill
+           text-body-strong text-paper
+           bg-ink
+           transition-all duration-200 ease-atelier
+           active:scale-[0.97]
+           disabled:opacity-30 disabled:cursor-not-allowed
+           hover:bg-rust;
   }
 
-  /* ── Buttons ────────────────────────────────────────────────── */
-  .btn-primary {
+  .btn-rust {
     @apply inline-flex items-center justify-center
            px-5 py-2.5 rounded-pill
-           text-body-strong text-canvas
-           bg-amber
+           text-body-strong text-paper
+           bg-rust
            transition-all duration-200 ease-atelier
            active:scale-[0.97]
-           disabled:opacity-40 disabled:cursor-not-allowed disabled:active:scale-100
-           hover:bg-amber-soft hover:shadow-amber;
+           hover:bg-rust-deep
+           disabled:opacity-30 disabled:cursor-not-allowed;
   }
 
   .btn-secondary {
     @apply inline-flex items-center justify-center
            px-5 py-2.5 rounded-pill
            text-body text-ink
-           bg-glass
+           bg-transparent
            transition-all duration-200 ease-atelier
            active:scale-[0.97]
-           hover:bg-glass-stronger;
-    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10);
+           hover:bg-ink-08;
+    box-shadow: 0 0 0 1px rgba(25, 23, 19, 0.20);
   }
 
   .btn-ghost {
@@ -155,50 +180,96 @@
            px-3 py-1.5 rounded-md
            text-caption text-ink-70
            transition-colors duration-200
-           hover:text-ink hover:bg-glass;
+           hover:text-ink hover:bg-ink-08;
   }
 
-  .btn-danger {
-    @apply inline-flex items-center justify-center
-           px-5 py-2.5 rounded-pill
-           text-body-strong text-status-err
-           transition-colors duration-200
-           hover:bg-status-err-glow;
-    box-shadow: 0 0 0 1px rgba(255, 122, 122, 0.4);
-  }
-
-  /* ── Inputs ─────────────────────────────────────────────────── */
-  .input-glass {
-    @apply w-full bg-glass text-ink
+  /* ── Inputs — flat printed input fields ────────────────────── */
+  .input-print {
+    @apply w-full bg-paper-deep text-ink
            rounded-md px-4 py-3
            text-body
            outline-none
            transition-all duration-200;
-    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10);
+    box-shadow: 0 0 0 1px rgba(25, 23, 19, 0.18),
+      inset 0 1px 0 rgba(25, 23, 19, 0.04);
   }
-  .input-glass:focus {
-    background: rgba(255, 255, 255, 0.07);
-    box-shadow: 0 0 0 1px rgba(255, 181, 69, 0.55),
-      0 0 24px -6px rgba(255, 181, 69, 0.35);
+  .input-print:focus {
+    box-shadow: 0 0 0 2px var(--rust),
+      inset 0 1px 0 rgba(25, 23, 19, 0.04);
   }
-  .input-glass::placeholder {
-    color: rgba(245, 243, 236, 0.36);
+  .input-print::placeholder {
+    color: rgba(25, 23, 19, 0.36);
   }
 
-  /* ── Cards ──────────────────────────────────────────────────── */
+  /* ── Cards — flat printed paper, hairline ruled ────────────── */
   .card {
-    @apply rounded-lg p-6 glass;
+    @apply rounded-md p-6;
+    background: var(--paper-deep);
+    box-shadow: 0 0 0 1px rgba(25, 23, 19, 0.12),
+      inset 0 1px 0 rgba(255, 255, 255, 0.45);
   }
 
-  /* ── Editorial italic moments ───────────────────────────────── */
-  .serif-italic {
-    font-family: var(--font-instrument), ui-serif, Georgia, serif;
+  .card-rust {
+    @apply rounded-md p-6;
+    background: linear-gradient(
+      180deg,
+      rgba(245, 216, 200, 0.6) 0%,
+      var(--paper-deep) 100%
+    );
+    box-shadow: 0 0 0 1px rgba(200, 77, 44, 0.35),
+      inset 0 1px 0 rgba(255, 255, 255, 0.45);
+  }
+
+  /* ── Folio chrome (the magazine masthead vibe) ─────────────── */
+  .folio-chrome {
+    @apply font-mono uppercase tracking-[0.22em] text-ink-50;
+    font-size: 10px;
+    line-height: 1.4;
+    font-weight: 600;
+  }
+  .folio-chrome--ink {
+    @apply text-ink;
+  }
+  .folio-chrome--rust {
+    @apply text-rust;
+  }
+
+  /* Hairline rule — animates in (use animate-rule) */
+  .hairline {
+    height: 1px;
+    background: rgba(25, 23, 19, 0.16);
+  }
+  .hairline--rust {
+    background: var(--rust);
+  }
+  .hairline--double {
+    height: 4px;
+    background: linear-gradient(
+      to bottom,
+      rgba(25, 23, 19, 0.22),
+      rgba(25, 23, 19, 0.22) 1px,
+      transparent 1px,
+      transparent 3px,
+      rgba(25, 23, 19, 0.22) 3px,
+      rgba(25, 23, 19, 0.22) 4px
+    );
+  }
+
+  /* Drop-cap for assistant answers (the editorial feature) */
+  .drop-cap::first-letter {
+    font-family: var(--font-fraunces), ui-serif, Georgia, serif;
     font-style: italic;
     font-weight: 400;
-    letter-spacing: -0.01em;
+    font-variation-settings: "SOFT" 30, "WONK" 1;
+    color: var(--rust);
+    float: left;
+    font-size: 4.4em;
+    line-height: 0.85;
+    margin: 0.08em 0.12em -0.05em -0.04em;
+    padding: 0;
   }
 
-  /* ── Containers ─────────────────────────────────────────────── */
+  /* Containers */
   .container-app {
     @apply max-w-[1480px] mx-auto px-6 md:px-10;
   }
@@ -209,49 +280,35 @@
     @apply max-w-[760px] mx-auto px-6 md:px-10;
   }
 
-  /* ── Chat-specific helpers ──────────────────────────────────── */
-  .chat-bubble-user {
-    @apply rounded-2xl rounded-tr-sm px-5 py-3 text-body text-ink;
-    background: linear-gradient(
-      135deg,
-      rgba(255, 181, 69, 0.16) 0%,
-      rgba(255, 181, 69, 0.08) 100%
-    );
-    box-shadow: 0 0 0 1px rgba(255, 181, 69, 0.22),
-      0 8px 24px -8px rgba(255, 181, 69, 0.18);
+  /* Italic-on-hover (editorial micro-interaction) */
+  .hover-italic {
+    transition: color 0.2s ease, font-style 0.001s;
   }
-
-  .chat-bubble-assistant {
-    @apply rounded-2xl rounded-tl-sm px-5 py-4 text-body text-ink;
-    background: linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.05) 0%,
-      rgba(255, 255, 255, 0.025) 100%
-    );
-    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10),
-      0 16px 48px -16px rgba(0, 0, 0, 0.5);
-    backdrop-filter: blur(16px);
-    -webkit-backdrop-filter: blur(16px);
+  .hover-italic:hover {
+    font-style: italic;
+    color: var(--rust);
   }
 
-  /* Hairline divider — for sectioning inside cards */
-  .hairline {
+  /* Underline-from-left link */
+  .link-rule {
+    position: relative;
+    color: inherit;
+  }
+  .link-rule::after {
+    content: "";
+    position: absolute;
+    bottom: -2px;
+    left: 0;
+    width: 100%;
     height: 1px;
-    background: linear-gradient(
-      90deg,
-      transparent,
-      rgba(255, 255, 255, 0.12),
-      transparent
-    );
+    background: currentColor;
+    transform: scaleX(0);
+    transform-origin: right;
+    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
   }
-  .hairline-vert {
-    width: 1px;
-    background: linear-gradient(
-      180deg,
-      transparent,
-      rgba(255, 255, 255, 0.10),
-      transparent
-    );
+  .link-rule:hover::after {
+    transform-origin: left;
+    transform: scaleX(1);
   }
 }
 
@@ -259,65 +316,54 @@
    Utilities
    ─────────────────────────────────────────────────────────────── */
 @layer utilities {
-  .text-shimmer {
-    background: linear-gradient(
-      110deg,
-      rgba(245, 243, 236, 0.4) 30%,
-      rgba(245, 243, 236, 1) 50%,
-      rgba(245, 243, 236, 0.4) 70%
-    );
-    background-size: 200% 100%;
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
-    animation: shimmerBg 2.4s linear infinite;
+  .text-balance {
+    text-wrap: balance;
   }
-
-  @keyframes shimmerBg {
-    0% {
-      background-position: 200% 0;
-    }
-    100% {
-      background-position: -200% 0;
-    }
+  .text-pretty {
+    text-wrap: pretty;
   }
 
-  /* Aurora gradient orbs (used decoratively behind hero) */
-  .aurora-amber {
-    position: absolute;
-    border-radius: 9999px;
-    background: radial-gradient(
-      circle,
-      rgba(255, 181, 69, 0.32) 0%,
-      rgba(255, 181, 69, 0) 65%
+  /* Halftone backdrop — for hero/feature panels */
+  .halftone-bg {
+    background-image: radial-gradient(
+      circle at center,
+      rgba(25, 23, 19, 0.18) 0.8px,
+      transparent 1.6px
     );
-    filter: blur(80px);
-    pointer-events: none;
+    background-size: 5px 5px;
   }
-  .aurora-violet {
-    position: absolute;
-    border-radius: 9999px;
-    background: radial-gradient(
-      circle,
-      rgba(120, 90, 240, 0.22) 0%,
-      rgba(120, 90, 240, 0) 65%
+  .halftone-rust {
+    background-image: radial-gradient(
+      circle at center,
+      rgba(200, 77, 44, 0.4) 0.8px,
+      transparent 1.6px
     );
-    filter: blur(90px);
-    pointer-events: none;
+    background-size: 5px 5px;
+  }
+
+  /* Register marks (corner crosshairs) */
+  .register-corners {
+    position: relative;
   }
-  .aurora-teal {
+  .register-corners::before,
+  .register-corners::after {
+    content: "✚";
     position: absolute;
-    border-radius: 9999px;
-    background: radial-gradient(
-      circle,
-      rgba(80, 200, 200, 0.18) 0%,
-      rgba(80, 200, 200, 0) 65%
-    );
-    filter: blur(80px);
-    pointer-events: none;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: rgba(25, 23, 19, 0.30);
+    line-height: 1;
+  }
+  .register-corners::before {
+    top: 8px;
+    left: 8px;
+  }
+  .register-corners::after {
+    bottom: 8px;
+    right: 8px;
   }
 
-  /* No-scrollbar utility */
+  /* No-scrollbar */
   .scrollbar-none {
     scrollbar-width: none;
   }
@@ -325,7 +371,8 @@
     display: none;
   }
 
-  .text-balance {
-    text-wrap: balance;
+  /* Riso-style "ink offset" effect — used for emphasis text */
+  .ink-offset {
+    text-shadow: 1px 0 0 rgba(200, 77, 44, 0.5);
   }
 }

app/layout.tsx

@@ -1,35 +1,35 @@
 import type { Metadata } from "next";
-import { Instrument_Serif, Manrope, JetBrains_Mono } from "next/font/google";
+import { Fraunces, IBM_Plex_Sans, JetBrains_Mono } from "next/font/google";
 import "./globals.css";
 import { Providers } from "./providers";
 import { AppShell } from "@/components/chat/AppShell";
 
-const manrope = Manrope({
+const fraunces = Fraunces({
   subsets: ["latin"],
-  variable: "--font-manrope",
+  variable: "--font-fraunces",
   display: "swap",
-  weight: ["300", "400", "500", "600", "700"],
+  style: ["normal", "italic"],
+  axes: ["SOFT", "WONK", "opsz"],
 });
 
-const instrument = Instrument_Serif({
+const plex = IBM_Plex_Sans({
   subsets: ["latin"],
-  variable: "--font-instrument",
+  variable: "--font-plex",
   display: "swap",
-  weight: ["400"],
-  style: ["normal", "italic"],
+  weight: ["300", "400", "500", "600", "700"],
 });
 
 const mono = JetBrains_Mono({
   subsets: ["latin"],
   variable: "--font-mono",
   display: "swap",
-  weight: ["400", "500"],
+  weight: ["400", "500", "600"],
 });
 
 export const metadata: Metadata = {
-  title: "doc-to-lora · Etiya BSS Atelier",
+  title: "doc·to·lora — Etiya BSS Folio",
   description:
-    "An atelier for stateless retrieval-augmented inference over Etiya BSS documents — built on the doc-to-lora hypernetwork.",
+    "A printed-publication interrogation surface for the Etiya BSS corpus, built on the doc-to-lora hypernetwork.",
 };
 
 export default function RootLayout({
@@ -40,7 +40,7 @@ export default function RootLayout({
   return (
     <html
       lang="en"
-      className={`${manrope.variable} ${instrument.variable} ${mono.variable}`}
+      className={`${fraunces.variable} ${plex.variable} ${mono.variable}`}
     >
       <body className="min-h-screen">
         <Providers>

app/system/page.tsx

@@ -6,6 +6,10 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 import clsx from "clsx";
 
+/**
+ * Colophon. The publication's printer's marks: typesetters, presses,
+ * paper, ink. Here: model, hardware, latencies, eval suite, indexer.
+ */
 export default function SystemPage() {
   const { data, error, refetch, isFetching } = useQuery({
     queryKey: ["health"],
@@ -26,125 +30,195 @@ export default function SystemPage() {
 
   return (
     <div className="flex-1 overflow-y-auto">
-      <div className="container-app py-10 space-y-10">
-        {/* Header */}
-        <header className="flex items-end justify-between flex-wrap gap-4 animate-fade-in">
-          <div>
-            <h1 className="text-display-lg text-ink">
-              System <span className="serif-italic text-amber">readout.</span>
-            </h1>
-            <p className="text-body text-ink-50 mt-2">
-              Live telemetry — auto-refresh every 30s.
-            </p>
+      <div className="container-app py-10 space-y-12">
+        {/* Editorial masthead */}
+        <header className="animate-fade-in">
+          <div className="flex items-baseline justify-between mb-3">
+            <span className="folio-chrome">Folio III · Colophon</span>
+            <button
+              onClick={() => refetch()}
+              disabled={isFetching}
+              className="folio-chrome hover:text-rust transition-colors"
+            >
+              {isFetching ? "Refreshing…" : "Refresh ↻"}
+            </button>
           </div>
-          <button
-            onClick={() => refetch()}
-            disabled={isFetching}
-            className="btn-secondary"
+          <h1
+            className="text-ink"
+            style={{
+              fontSize: "clamp(56px, 9vw, 110px)",
+              lineHeight: 0.92,
+              fontWeight: 300,
+              letterSpacing: "-0.04em",
+              fontFamily: "var(--font-fraunces)",
+            }}
           >
-            {isFetching ? "Refreshing…" : "Refresh now"}
-          </button>
-        </header>
-
-        {error && (
-          <div
-            className="p-4 rounded-md"
+            The <span className="italic-display text-rust">colophon.</span>
+          </h1>
+          <div className="hairline--double mt-6 animate-rule" />
+          <p
+            className="text-ink mt-6 max-w-[64ch] animate-stagger-1"
             style={{
-              background: "rgba(255, 122, 122, 0.06)",
-              boxShadow: "0 0 0 1px rgba(255, 122, 122, 0.28)",
+              fontFamily: "var(--font-fraunces)",
+              fontSize: "20px",
+              lineHeight: 1.45,
+              fontWeight: 300,
             }}
           >
-            <p className="text-status-err text-body-strong">
-              Failed to read /health
-            </p>
+            A printer's mark for the atelier — the presses, the type, the paper.
+            Live readouts auto-refresh every thirty seconds.
+          </p>
+        </header>
+
+        {error && (
+          <div className="card-rust animate-fade-in">
+            <div className="folio-chrome--rust folio-chrome mb-1">Errata</div>
+            <p className="text-body-strong text-ink">Failed to read /health</p>
             <p className="text-caption text-ink-70 mt-1">
               {error instanceof Error ? error.message : String(error)}
             </p>
           </div>
         )}
 
-        {/* Hero metrics */}
-        <section className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4 animate-fade-up">
-          <BigMetric
-            label="Stage"
-            value={
-              data === undefined
-                ? "—"
-                : data.model_loaded
-                ? "Running"
-                : "Loading"
-            }
-            tone={
-              data === undefined ? "neutral" : data.model_loaded ? "ok" : "warn"
-            }
-          />
-          <BigMetric
-            label="Documents indexed"
-            value={data?.doc_count?.toLocaleString() ?? "—"}
-          />
-          <BigMetric
-            label="GPU memory"
-            value={data ? data.gpu_memory_gb.toFixed(2) : "—"}
-            unit="GB"
-          />
-          <BigMetric label="Hardware" value="A100" unit="80GB" />
+        {/* Hero metric panel — magazine pull-quote of the GPU */}
+        <section className="animate-fade-up">
+          <div
+            className="rounded-lg p-8 md:p-12 register-corners halftone-bg"
+            style={{
+              background:
+                "linear-gradient(180deg, var(--paper-deep) 0%, var(--paper) 100%)",
+              boxShadow: "0 0 0 1.5px rgba(25,23,19,0.30), 0 1px 0 rgba(255,255,255,0.5) inset",
+            }}
+          >
+            <div className="folio-chrome mb-3">Press status</div>
+            <div className="flex items-baseline gap-4 flex-wrap">
+              <div
+                className="italic-display text-ink"
+                style={{ fontSize: "clamp(64px, 10vw, 120px)", lineHeight: 0.95, fontWeight: 300 }}
+              >
+                {data === undefined ? "—" : data.model_loaded ? "Running" : "Loading"}
+              </div>
+              <span
+                className={clsx(
+                  "inline-block w-3 h-3 rounded-full mb-3 ml-2 transition-colors",
+                  data === undefined
+                    ? "bg-ink-30"
+                    : data.model_loaded
+                    ? "bg-status-ok animate-ink-pulse"
+                    : "bg-status-warn animate-ink-pulse"
+                )}
+              />
+            </div>
+
+            <div className="hairline mt-8 mb-6" />
+
+            <div className="grid sm:grid-cols-3 gap-x-8 gap-y-6">
+              <Pull
+                label="Documents indexed"
+                value={data?.doc_count?.toLocaleString() ?? "—"}
+              />
+              <Pull
+                label="GPU memory"
+                value={data ? data.gpu_memory_gb.toFixed(2) : "—"}
+                unit="GB"
+              />
+              <Pull label="Hardware" value="A100" unit="80GB" />
+            </div>
+          </div>
         </section>
 
         {/* Latencies + corpus */}
-        <section className="grid lg:grid-cols-2 gap-4 animate-fade-up-slow">
+        <section className="grid lg:grid-cols-2 gap-6 animate-fade-up-slow">
           <Latencies />
           <CorpusBreakdown data={data} />
         </section>
 
-        {/* Eval suite — featured panel */}
-        <section
-          className="relative rounded-xl p-8 md:p-10 overflow-hidden"
-          style={{
-            background:
-              "linear-gradient(135deg, rgba(255,181,69,0.08) 0%, rgba(255,255,255,0.02) 100%)",
-            boxShadow:
-              "0 0 0 1px rgba(255,181,69,0.20), 0 32px 80px -32px rgba(0,0,0,0.6)",
-          }}
-        >
-          <div className="aurora-amber" style={{ width: 480, height: 480, top: -200, right: -200 }} />
-          <div className="relative">
-            <div className="text-micro uppercase tracking-[0.18em] text-amber font-mono">
-              Eval suite
-            </div>
-            <h2 className="text-display-md text-ink mt-3">
-              100-question <span className="serif-italic">benchmark.</span>
-            </h2>
-            <div className="mt-8 grid grid-cols-2 md:grid-cols-4 gap-6">
-              <BenchMetric label="Hallucination defense" value="87.5" unit="%" />
-              <BenchMetric label="Concept queries" value="84" unit="%" />
-              <BenchMetric label="Cross-domain" value="55" unit="%" />
-              <BenchMetric label="Fact recall" value="59" unit="%" />
+        {/* Eval — pull-quote panel with halftone */}
+        <section className="animate-fade-up">
+          <div
+            className="rounded-lg p-8 md:p-10 relative overflow-hidden"
+            style={{
+              background: "var(--ink)",
+              color: "var(--paper)",
+            }}
+          >
+            <div
+              aria-hidden
+              className="absolute inset-0 opacity-25"
+              style={{
+                backgroundImage:
+                  "radial-gradient(circle at center, rgba(244, 237, 224, 0.5) 0.8px, transparent 1.6px)",
+                backgroundSize: "5px 5px",
+              }}
+            />
+            <div className="relative">
+              <div className="folio-chrome" style={{ color: "rgba(244,237,224,0.5)" }}>
+                Issue review · Eval suite · 100 questions
+              </div>
+              <h2
+                className="mt-3"
+                style={{
+                  fontFamily: "var(--font-fraunces)",
+                  fontSize: "44px",
+                  lineHeight: 1.05,
+                  fontWeight: 400,
+                }}
+              >
+                The <span className="italic-display" style={{ color: "var(--rust)" }}>numbers.</span>
+              </h2>
+              <div className="hairline--double mt-6 mb-8" style={{ filter: "invert(1)", opacity: 0.6 }} />
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-x-8 gap-y-6">
+                <Bench label="Hallucination defense" value="87.5" unit="%" />
+                <Bench label="Concept queries" value="84" unit="%" />
+                <Bench label="Cross-domain" value="55" unit="%" />
+                <Bench label="Fact recall" value="59" unit="%" />
+              </div>
+              <p
+                className="mt-8 max-w-[60ch]"
+                style={{
+                  fontFamily: "var(--font-fraunces)",
+                  fontSize: "16px",
+                  lineHeight: 1.55,
+                  fontWeight: 300,
+                  color: "rgba(244,237,224,0.75)",
+                }}
+              >
+                Pure numerical signals — anchor, dense, rerank — with zero
+                hardcoded reference text. The eval set lives at{" "}
+                <span className="font-mono" style={{ color: "var(--paper)" }}>
+                  eval/eval_set.jsonl
+                </span>{" "}
+                and is replayed on demand.
+              </p>
             </div>
-            <p className="text-caption text-ink-70 mt-8 max-w-[640px]">
-              Pure numerical signals (anchor / dense / rerank) with zero hardcoded
-              reference text. The eval set lives at{" "}
-              <span className="font-mono text-ink">eval/eval_set.jsonl</span>{" "}
-              and can be replayed any time.
-            </p>
           </div>
         </section>
 
         {/* Index management */}
         <section>
           <div className="mb-5">
-            <h2 className="text-display-md text-ink">
-              Index <span className="serif-italic text-amber">management.</span>
+            <span className="folio-chrome">Press · Index management</span>
+            <h2
+              className="text-ink mt-2"
+              style={{
+                fontFamily: "var(--font-fraunces)",
+                fontSize: "36px",
+                fontWeight: 500,
+                letterSpacing: "-0.02em",
+              }}
+            >
+              Run the <span className="italic-display text-rust">indexer.</span>
             </h2>
-            <p className="text-caption text-ink-50 mt-1.5 max-w-[680px]">
-              The RAG index needs to be synchronized after document changes.
-              Incremental is the default — it only embeds new/removed docs.
+            <p className="text-caption text-ink-70 mt-1.5 max-w-[64ch]">
+              The retrieval index needs syncing after documents change.
+              Incremental embeds only deltas; full rebuild re-anchors topics.
             </p>
           </div>
 
-          <div className="grid md:grid-cols-2 gap-4">
+          <div className="grid md:grid-cols-2 gap-6">
             <ReindexCard
               title="Incremental"
-              description="Sync new and removed docs only."
+              description="Sync new and removed entries only."
               cost="≈ $0.0001"
               latency="~350 ms"
               loading={
@@ -153,13 +227,13 @@ export default function SystemPage() {
               onClick={() =>
                 reindex.mutate({ force_full: false, rebuild_anchors: false })
               }
+              accent
             />
             <ReindexCard
               title="Full rebuild"
-              description="Re-embed all docs + rebuild K-means anchors."
+              description="Re-embed all entries + rebuild K-means topic anchors."
               cost="≈ $0.16"
               latency="~30 s"
-              danger
               loading={reindex.isPending && !!reindex.variables?.force_full}
               onClick={() =>
                 reindex.mutate({ force_full: true, rebuild_anchors: true })
@@ -168,25 +242,22 @@ export default function SystemPage() {
           </div>
 
           {reindex.data && (
-            <div className="mt-4 card animate-fade-up">
-              <div className="text-micro uppercase tracking-[0.15em] text-status-ok font-mono mb-2">
-                re-index complete
+            <div className="mt-6 card animate-fade-up">
+              <div className="folio-chrome--ink folio-chrome mb-2">
+                Re-index complete
               </div>
-              <pre className="font-mono text-caption text-ink whitespace-pre-wrap break-all">
+              <pre
+                className="font-mono text-caption text-ink whitespace-pre-wrap break-all"
+                style={{ fontSize: "12px", lineHeight: 1.6 }}
+              >
                 {JSON.stringify(reindex.data, null, 2)}
               </pre>
             </div>
           )}
           {reindex.error && (
-            <div
-              className="mt-4 p-4 rounded-md"
-              style={{
-                background: "rgba(255, 122, 122, 0.06)",
-                boxShadow: "0 0 0 1px rgba(255, 122, 122, 0.28)",
-              }}
-            >
-              <div className="text-micro uppercase tracking-[0.15em] text-status-err font-mono mb-1">
-                re-index failed
+            <div className="mt-6 card-rust">
+              <div className="folio-chrome--rust folio-chrome mb-1">
+                Re-index failed
               </div>
               <p className="text-caption text-ink">
                 {reindex.error instanceof Error
@@ -201,44 +272,40 @@ export default function SystemPage() {
   );
 }
 
-function BigMetric({
+function Pull({
   label,
   value,
   unit,
-  tone = "neutral",
 }: {
   label: string;
   value: string | number;
   unit?: string;
-  tone?: "ok" | "warn" | "err" | "neutral";
 }) {
-  const dotCls = {
-    ok: "bg-status-ok shadow-[0_0_8px_rgba(93,214,168,0.7)]",
-    warn: "bg-amber shadow-[0_0_8px_rgba(255,181,69,0.7)]",
-    err: "bg-status-err",
-    neutral: "bg-ink-30",
-  }[tone];
   return (
-    <div className="card">
-      <div className="flex items-center gap-2 text-micro uppercase tracking-[0.14em] text-ink-50 font-mono">
-        <span
-          className={clsx(
-            "inline-block w-1.5 h-1.5 rounded-full",
-            dotCls,
-            tone !== "neutral" && "animate-pulse-soft"
-          )}
-        />
-        {label}
-      </div>
-      <div className="text-display-md font-mono text-ink mt-2">
+    <div>
+      <div className="folio-chrome mb-1.5">{label}</div>
+      <div
+        className="text-ink"
+        style={{
+          fontFamily: "var(--font-fraunces)",
+          fontSize: "44px",
+          lineHeight: 1,
+          fontWeight: 400,
+          letterSpacing: "-0.02em",
+        }}
+      >
         {value}
-        {unit && <span className="text-ink-50 ml-1.5 text-lead">{unit}</span>}
+        {unit && (
+          <span className="text-rust ml-1.5" style={{ fontSize: "22px", fontWeight: 400 }}>
+            {unit}
+          </span>
+        )}
       </div>
     </div>
   );
 }
 
-function BenchMetric({
+function Bench({
   label,
   value,
   unit,
@@ -249,12 +316,28 @@ function BenchMetric({
 }) {
   return (
     <div>
-      <div className="text-micro uppercase tracking-[0.14em] text-ink-50 font-mono">
+      <div
+        className="folio-chrome"
+        style={{ color: "rgba(244,237,224,0.5)" }}
+      >
         {label}
       </div>
-      <div className="text-display-lg font-mono text-ink mt-2">
+      <div
+        className="mt-1.5"
+        style={{
+          fontFamily: "var(--font-fraunces)",
+          fontSize: "56px",
+          lineHeight: 1,
+          fontWeight: 300,
+          letterSpacing: "-0.025em",
+        }}
+      >
         {value}
-        {unit && <span className="text-amber ml-1 text-display-sm">{unit}</span>}
+        {unit && (
+          <span style={{ color: "var(--rust)", fontSize: "26px", marginLeft: "2px" }}>
+            {unit}
+          </span>
+        )}
       </div>
     </div>
   );
@@ -284,11 +367,23 @@ function Latencies() {
 
   return (
     <div className="card">
-      <h3 className="text-body-strong text-ink mb-4">Round-trip latencies</h3>
-      <div className="space-y-2.5 text-caption">
+      <div className="flex items-baseline justify-between mb-3">
+        <span className="folio-chrome">Press timings</span>
+      </div>
+      <h3
+        className="text-ink mb-4"
+        style={{
+          fontFamily: "var(--font-fraunces)",
+          fontSize: "24px",
+          fontWeight: 500,
+        }}
+      >
+        Round-trip <span className="italic-display text-rust">latencies.</span>
+      </h3>
+      <div className="space-y-2.5">
         <Row label="browser → ping" value={pingMs ? `${pingMs.toFixed(0)} ms` : "—"} />
         <Row label="ask_smart (reject)" value="≈ 400 ms" />
-        <Row label="ask_smart (inference)" value="≈ 1.3-2.0 s" />
+        <Row label="ask_smart (inference)" value="≈ 1.3 – 2.0 s" />
         <Row label="reindex (incremental)" value="≈ 350 ms" />
         <Row label="reindex (full)" value="≈ 30 s" />
       </div>
@@ -299,8 +394,20 @@ function Latencies() {
 function CorpusBreakdown({ data }: { data: HealthResponse | undefined }) {
   return (
     <div className="card">
-      <h3 className="text-body-strong text-ink mb-4">Corpus &amp; index</h3>
-      <div className="space-y-2.5 text-caption">
+      <div className="flex items-baseline justify-between mb-3">
+        <span className="folio-chrome">Plates &amp; type</span>
+      </div>
+      <h3
+        className="text-ink mb-4"
+        style={{
+          fontFamily: "var(--font-fraunces)",
+          fontSize: "24px",
+          fontWeight: 500,
+        }}
+      >
+        Corpus &amp; <span className="italic-display text-rust">index.</span>
+      </h3>
+      <div className="space-y-2.5">
         <Row
           label="documents on disk"
           value={data ? data.doc_count.toLocaleString() : "—"}
@@ -321,7 +428,7 @@ function ReindexCard({
   cost,
   latency,
   loading,
-  danger,
+  accent,
   onClick,
 }: {
   title: string;
@@ -329,30 +436,32 @@ function ReindexCard({
   cost: string;
   latency: string;
   loading: boolean;
-  danger?: boolean;
+  accent?: boolean;
   onClick: () => void;
 }) {
   return (
-    <div className="card flex flex-col gap-4">
+    <div className={accent ? "card-rust flex flex-col gap-4" : "card flex flex-col gap-4"}>
       <div>
-        <div className="flex items-center justify-between">
-          <h3 className="text-display-sm text-ink">{title}</h3>
-          <span className="text-micro font-mono uppercase tracking-[0.12em] text-amber">
-            {latency}
-          </span>
+        <div className="flex items-baseline justify-between">
+          <span className="folio-chrome--ink folio-chrome">{latency}</span>
+          <span className="folio-chrome">openai cost {cost}</span>
         </div>
-        <p className="text-caption text-ink-70 mt-1">{description}</p>
-        <p className="text-micro text-ink-50 mt-2 font-mono uppercase tracking-[0.10em]">
-          openai cost {cost}
-        </p>
+        <h3
+          className="text-ink mt-2"
+          style={{
+            fontFamily: "var(--font-fraunces)",
+            fontSize: "26px",
+            fontWeight: 500,
+          }}
+        >
+          {title}<span className="italic-display text-rust">.</span>
+        </h3>
+        <p className="text-caption text-ink-70 mt-1.5">{description}</p>
       </div>
       <button
         onClick={onClick}
         disabled={loading}
-        className={clsx(
-          danger ? "btn-secondary" : "btn-primary",
-          "self-start"
-        )}
+        className={accent ? "btn-rust self-start" : "btn-primary self-start"}
       >
         {loading ? "Running…" : `Run ${title.toLowerCase()}`}
       </button>
@@ -362,11 +471,9 @@ function ReindexCard({
 
 function Row({ label, value }: { label: string; value: string }) {
   return (
-    <div className="flex items-center justify-between gap-4">
-      <span className="text-ink-50 font-mono uppercase tracking-[0.10em] text-micro">
-        {label}
-      </span>
-      <span className="font-mono text-ink text-caption truncate">{value}</span>
+    <div className="grid grid-cols-[1fr_auto] gap-4 items-baseline border-b border-ink/10 pb-2 last:border-0 last:pb-0">
+      <span className="folio-chrome">{label}</span>
+      <span className="font-mono text-caption text-ink truncate">{value}</span>
     </div>
   );
 }

components/chat/AppShell.tsx

@@ -4,12 +4,10 @@ import { Sidebar } from "./Sidebar";
 import { TopBar } from "./TopBar";
 import { Aurora } from "./Aurora";
 import { useChatStore } from "@/lib/chatStore";
-import clsx from "clsx";
 import { usePathname } from "next/navigation";
 import { useEffect } from "react";
 
 export function AppShell({ children }: { children: React.ReactNode }) {
-  const sidebarOpen = useChatStore((s) => s.sidebarOpen);
   const pathname = usePathname();
   const conversations = useChatStore((s) => s.conversations);
   const activeId = useChatStore((s) => s.activeId);
@@ -25,21 +23,12 @@ export function AppShell({ children }: { children: React.ReactNode }) {
 
   return (
     <div className="relative min-h-screen flex flex-col">
-      {/* Atmospheric background — fixed, behind everything */}
       <Aurora />
-
       <TopBar />
 
-      <div className="relative z-10 flex-1 flex overflow-hidden">
+      <div className="relative z-10 flex-1 flex">
         <Sidebar />
-        <main
-          className={clsx(
-            "flex-1 flex flex-col min-w-0 transition-[margin] duration-300 ease-atelier",
-            sidebarOpen ? "md:ml-0" : "md:ml-0"
-          )}
-        >
-          {children}
-        </main>
+        <main className="flex-1 flex flex-col min-w-0">{children}</main>
       </div>
     </div>
   );

components/chat/Aurora.tsx

@@ -1,44 +1,34 @@
 "use client";
 
 /**
- * Atmospheric backdrop — three slow-drifting aurora orbs.
- * Pure CSS, no JS animation. Pinned behind everything via fixed inset.
+ * Halftone Folio backdrop.
+ * A printer's plate: corner register marks + bleed lines + halftone field.
+ * Pure decoration. Pinned behind the page.
  */
 export function Aurora() {
   return (
-    <div
-      aria-hidden
-      className="fixed inset-0 z-0 overflow-hidden pointer-events-none"
-    >
-      <div
-        className="aurora-amber animate-aurora-1"
-        style={{
-          width: "70vmax",
-          height: "70vmax",
-          top: "-25vmax",
-          right: "-20vmax",
-        }}
-      />
+    <>
+      {/* Page-edge register marks (printer's bleed lines) */}
       <div
-        className="aurora-violet animate-aurora-2"
-        style={{
-          width: "60vmax",
-          height: "60vmax",
-          bottom: "-20vmax",
-          left: "-15vmax",
-        }}
-      />
-      <div
-        className="aurora-teal animate-aurora-1"
-        style={{
-          width: "40vmax",
-          height: "40vmax",
-          top: "40vh",
-          left: "30vw",
-          opacity: 0.6,
-          animationDelay: "-8s",
-        }}
-      />
-    </div>
+        aria-hidden
+        className="fixed inset-0 z-0 pointer-events-none hidden md:block"
+      >
+        <Cross className="top-3 left-3" />
+        <Cross className="top-3 right-3" />
+        <Cross className="bottom-3 left-3" />
+        <Cross className="bottom-3 right-3" />
+      </div>
+    </>
+  );
+}
+
+function Cross({ className }: { className?: string }) {
+  return (
+    <span
+      className={`absolute w-[14px] h-[14px] text-ink-30 font-mono leading-none ${className ?? ""}`}
+      style={{ fontSize: "13px" }}
+    >
+      ✚
+    </span>
   );
 }

components/chat/Composer.tsx

@@ -4,6 +4,10 @@ import { useEffect, useRef, useState } from "react";
 import clsx from "clsx";
 import { useChatStore } from "@/lib/chatStore";
 
+/**
+ * Composer — the printer's submission box.
+ * Heavy hairline frame, italic placeholder, ink-on-paper buttons.
+ */
 export function Composer({
   onSubmit,
   disabled,
@@ -19,7 +23,6 @@ export function Composer({
   const ref = useRef<HTMLTextAreaElement | null>(null);
   const settings = useChatStore((s) => s.settings);
 
-  // Autosize textarea
   useEffect(() => {
     const el = ref.current;
     if (!el) return;
@@ -41,71 +44,99 @@ export function Composer({
     }
   };
 
+  const tunedDot = !isDefaults(settings);
+
   return (
-    <div className="sticky bottom-0 z-20 px-4 sm:px-6 pt-4 pb-5 bg-gradient-to-t from-canvas-deep via-canvas-deep/85 to-transparent">
-      <div className="max-w-[920px] mx-auto">
-        <div
-          className="relative rounded-2xl glass-strong overflow-hidden transition-all duration-200"
-          style={{ padding: "10px 12px" }}
-        >
-          <textarea
-            ref={ref}
-            value={value}
-            onChange={(e) => setValue(e.target.value)}
-            onKeyDown={onKey}
-            disabled={disabled}
-            rows={1}
-            placeholder="Ask anything about Etiya BSS…"
-            className="w-full bg-transparent outline-none resize-none px-3 py-2.5 text-body text-ink placeholder:text-ink-30 leading-relaxed scrollbar-none"
-            style={{ maxHeight: 200 }}
-            aria-label="Question"
-          />
+    <div className="sticky bottom-0 z-20 px-4 sm:px-6 pt-3 pb-5 bg-gradient-to-t from-paper via-paper to-transparent">
+      <div className="max-w-[1040px] mx-auto">
+        <div className="grid grid-cols-[80px_1fr] gap-6">
+          {/* Margin folio */}
+          <div className="text-right pr-2 pt-3 hidden sm:block">
+            <div className="folio-chrome">Submit</div>
+          </div>
+
+          {/* Composer body */}
+          <div
+            className="rounded-md transition-shadow duration-200"
+            style={{
+              background: "var(--paper)",
+              boxShadow:
+                "0 0 0 1.5px rgba(25,23,19,0.30), 0 6px 24px -8px rgba(25,23,19,0.18)",
+            }}
+          >
+            <textarea
+              ref={ref}
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+              onKeyDown={onKey}
+              disabled={disabled}
+              rows={1}
+              placeholder="Pose your question…"
+              className={clsx(
+                "w-full bg-transparent outline-none resize-none px-5 pt-4 pb-2 leading-relaxed scrollbar-none",
+                "text-ink placeholder:italic placeholder:text-ink-50",
+                "text-[18px]"
+              )}
+              style={{
+                fontFamily: "var(--font-fraunces), ui-serif, Georgia, serif",
+                fontWeight: 400,
+                maxHeight: 200,
+              }}
+              aria-label="Question"
+            />
 
-          {/* Action row */}
-          <div className="flex items-center justify-between mt-1.5 px-1">
-            <div className="flex items-center gap-1">
-              <ToolButton
-                onClick={onOpenSettings}
-                label="Tune retrieval & inference"
-                icon={
-                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-                    <circle cx="7" cy="7" r="2" stroke="currentColor" strokeWidth="1.4" />
-                    <path
-                      d="M7 1v2M7 11v2M1 7h2M11 7h2M2.8 2.8 4.2 4.2M9.8 9.8l1.4 1.4M2.8 11.2 4.2 9.8M9.8 4.2l1.4-1.4"
-                      stroke="currentColor"
-                      strokeWidth="1.3"
-                      strokeLinecap="round"
-                    />
-                  </svg>
-                }
-              >
-                <span className="text-caption hidden sm:inline">Settings</span>
-                {!isDefaults(settings) && (
-                  <span className="ml-1 inline-block w-1.5 h-1.5 rounded-full bg-amber animate-pulse-soft" />
-                )}
-              </ToolButton>
-              <ToolButton
-                onClick={onClear}
-                label="Clear conversation"
-                icon={
-                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-                    <path
-                      d="M3 4h8M5.5 4V2.5h3V4M4 4l.5 8h5L10 4M6 6.5v3M8 6.5v3"
-                      stroke="currentColor"
-                      strokeWidth="1.3"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    />
-                  </svg>
-                }
-              >
-                <span className="text-caption hidden sm:inline">Clear</span>
-              </ToolButton>
-              <span className="text-micro font-mono text-ink-30 ml-2 hidden md:inline">
-                ⏎ to send · ⇧⏎ for newline
-              </span>
+            <div className="flex items-center justify-between px-3 pb-2.5 pt-1 border-t border-ink/10">
+              <div className="flex items-center gap-1">
+                <ToolButton
+                  onClick={onOpenSettings}
+                  label="Tune retrieval & generation"
+                  hasDot={tunedDot}
+                  icon={
+                    <svg width="13" height="13" viewBox="0 0 13 13" fill="none">
+                      <circle
+                        cx="6.5"
+                        cy="6.5"
+                        r="2"
+                        stroke="currentColor"
+                        strokeWidth="1.4"
+                      />
+                      <path
+                        d="M6.5 1v2M6.5 10v2M1 6.5h2M10 6.5h2M2.6 2.6 4 4M9 9l1.4 1.4M2.6 10.4 4 9M9 4l1.4-1.4"
+                        stroke="currentColor"
+                        strokeWidth="1.3"
+                        strokeLinecap="round"
+                      />
+                    </svg>
+                  }
+                >
+                  Edit settings
+                </ToolButton>
+                <ToolButton
+                  onClick={onClear}
+                  label="Clear transcript"
+                  icon={
+                    <svg width="13" height="13" viewBox="0 0 13 13" fill="none">
+                      <path
+                        d="M2.5 3.5h8M5 3.5V2h3v1.5M3.5 3.5l.5 7.5h5l.5-7.5"
+                        stroke="currentColor"
+                        strokeWidth="1.3"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
+                  }
+                >
+                  Clear
+                </ToolButton>
+                <span className="folio-chrome ml-3 hidden md:inline">
+                  ⏎ submit · ⇧⏎ newline
+                </span>
+              </div>
+              <SendButton
+                onClick={submit}
+                disabled={!value.trim() || disabled}
+              />
             </div>
-            <SendButton onClick={submit} disabled={!value.trim() || disabled} />
           </div>
         </div>
       </div>
@@ -117,21 +148,29 @@ function ToolButton({
   onClick,
   icon,
   label,
+  hasDot,
   children,
 }: {
   onClick: () => void;
   icon: React.ReactNode;
   label: string;
+  hasDot?: boolean;
   children?: React.ReactNode;
 }) {
   return (
     <button
       onClick={onClick}
       title={label}
-      className="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-ink-50 hover:text-ink hover:bg-glass transition-colors"
+      className="relative inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-ink-70 hover:text-ink hover:bg-ink-08 transition-colors"
     >
       {icon}
-      {children}
+      <span className="folio-chrome hidden sm:inline">{children}</span>
+      {hasDot && (
+        <span
+          className="absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-rust animate-ink-pulse"
+          aria-hidden
+        />
+      )}
     </button>
   );
 }
@@ -147,18 +186,21 @@ function SendButton({
     <button
       onClick={onClick}
       disabled={disabled}
-      aria-label="Send"
+      aria-label="Submit"
       className={clsx(
-        "shrink-0 inline-flex items-center justify-center w-9 h-9 rounded-full transition-all",
-        "active:scale-[0.95]",
+        "shrink-0 inline-flex items-center gap-2 px-4 py-2 rounded-pill transition-all",
+        "active:scale-[0.97]",
         disabled
-          ? "bg-glass text-ink-30 cursor-not-allowed"
-          : "bg-amber text-canvas hover:bg-amber-soft hover:shadow-amber"
+          ? "bg-paper-deep text-ink-30 cursor-not-allowed"
+          : "bg-ink text-paper hover:bg-rust hover:shadow-rust"
       )}
     >
-      <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+      <span className="folio-chrome--ink folio-chrome" style={{ color: "inherit" }}>
+        Submit
+      </span>
+      <svg width="11" height="11" viewBox="0 0 11 11" fill="none">
         <path
-          d="M2.5 7h9M7 2.5l4.5 4.5L7 11.5"
+          d="M2 5.5h7M5.5 2 9 5.5 5.5 9"
           stroke="currentColor"
           strokeWidth="1.6"
           strokeLinecap="round"

components/chat/Empty.tsx

@@ -7,85 +7,115 @@ const SAMPLES = [
   "Can a category be localized in multiple languages?",
 ];
 
+/**
+ * Empty state — magazine cover for a new transcript.
+ */
 export function ChatEmpty({ onAsk }: { onAsk: (q: string) => void }) {
   return (
     <div className="relative flex-1 flex items-center justify-center px-6 py-12">
-      <div className="max-w-[760px] w-full text-center">
-        {/* Decorative orbital mark */}
-        <div className="flex justify-center mb-8 animate-fade-in">
-          <div
-            className="relative w-16 h-16 rounded-2xl flex items-center justify-center"
+      <div className="max-w-[920px] w-full">
+        {/* Top folio bar */}
+        <div className="flex items-baseline justify-between mb-10 animate-fade-in">
+          <span className="folio-chrome">Folio I · Transcript</span>
+          <span className="folio-chrome">№ 01</span>
+        </div>
+
+        {/* Headline — heavy editorial */}
+        <h1 className="animate-stagger-1">
+          <span
+            className="block font-display text-ink"
             style={{
-              background:
-                "linear-gradient(135deg, rgba(255,181,69,0.28), rgba(255,181,69,0.04))",
-              boxShadow:
-                "0 0 0 1px rgba(255,181,69,0.40), 0 0 64px -16px rgba(255,181,69,0.55)",
+              fontSize: "clamp(56px, 11vw, 132px)",
+              lineHeight: 0.92,
+              fontWeight: 300,
+              letterSpacing: "-0.04em",
             }}
           >
-            <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
-              <path
-                d="M14 3v4M14 21v4M3 14h4M21 14h4M6 6l3 3M19 19l3 3M6 22l3-3M19 9l3-3"
-                stroke="#ffb545"
-                strokeWidth="1.6"
-                strokeLinecap="round"
-              />
-              <circle cx="14" cy="14" r="3" fill="#ffb545" />
-            </svg>
-          </div>
-        </div>
-
-        {/* Editorial headline — sans + serif italic mix */}
-        <h1 className="text-display-xl text-ink animate-stagger-1 text-balance">
-          Ask <span className="serif-italic text-amber">anything.</span>
+            Pose a
+          </span>
+          <span
+            className="italic-display block text-rust"
+            style={{
+              fontSize: "clamp(64px, 13vw, 156px)",
+              lineHeight: 0.88,
+              fontWeight: 300,
+              letterSpacing: "-0.045em",
+              fontVariationSettings: '"SOFT" 100, "WONK" 1, "opsz" 144',
+            }}
+          >
+            question.
+          </span>
         </h1>
-        <p className="text-lead text-ink-70 mt-5 animate-stagger-2 text-balance">
-          A stateless retrieval-augmented atelier over{" "}
-          <span className="font-mono text-ink">1,166</span> Etiya BSS documents,
-          re-tokenizing every turn — no cache, no drift.
-        </p>
 
-        {/* Sample chips */}
-        <div className="mt-12 grid sm:grid-cols-2 gap-2.5 animate-stagger-3">
-          {SAMPLES.map((q) => (
-            <button
-              key={q}
-              onClick={() => onAsk(q)}
-              className="group text-left rounded-md p-4 transition-all
-                         bg-glass hover:bg-glass-stronger
-                         hover:shadow-amber/30"
-              style={{ boxShadow: "0 0 0 1px rgba(255,255,255,0.08)" }}
-            >
-              <div className="flex items-start gap-3">
-                <span className="shrink-0 mt-1 w-1 h-1 rounded-full bg-amber" />
-                <span className="text-body text-ink-70 group-hover:text-ink transition-colors">
-                  {q}
-                </span>
-              </div>
-            </button>
-          ))}
+        <div className="hairline mt-10 mb-6 animate-rule" />
+
+        {/* Lede paragraph (magazine deck style) */}
+        <div className="grid md:grid-cols-[2fr_1fr] gap-10 items-start animate-stagger-2">
+          <p
+            className="text-ink"
+            style={{
+              fontFamily: "var(--font-fraunces)",
+              fontSize: "22px",
+              lineHeight: 1.45,
+              fontWeight: 300,
+              letterSpacing: "-0.012em",
+            }}
+          >
+            A stateless retrieval-augmented atelier over{" "}
+            <span className="italic-display text-rust">1,166</span>{" "}
+            Etiya BSS documents. The hypernetwork re-tokenizes its source on
+            every turn — no LoRA cache, no drift, only fresh thinking.
+          </p>
+          <aside className="folio-chrome--ink folio-chrome border-l border-ink/30 pl-4">
+            <div className="mb-2">Methods</div>
+            <ul className="space-y-1.5 list-none normal-case tracking-normal text-caption text-ink-70">
+              <li>· K-means topic anchors</li>
+              <li>· BM25 + dense (text-3-large)</li>
+              <li>· BGE rerank · RRF fusion</li>
+              <li>· Local refusal classifier</li>
+            </ul>
+          </aside>
         </div>
 
-        {/* Capability strip */}
-        <div className="mt-14 flex flex-wrap items-center justify-center gap-x-8 gap-y-3 text-micro uppercase tracking-[0.18em] text-ink-50 font-mono animate-stagger-4">
-          <Cap label="triple-gate retrieval" />
-          <Dot />
-          <Cap label="bge rerank" />
-          <Dot />
-          <Cap label="kmeans anchors" />
-          <Dot />
-          <Cap label="zero hardcoded text" />
+        <div className="hairline--double mt-10 mb-8 animate-rule-2" />
+
+        {/* Sample interrogations */}
+        <div className="animate-stagger-3">
+          <div className="folio-chrome mb-4">Suggested entries</div>
+          <ul className="grid sm:grid-cols-2 gap-x-8 gap-y-1">
+            {SAMPLES.map((q, i) => (
+              <li key={q}>
+                <button
+                  onClick={() => onAsk(q)}
+                  className="group w-full text-left py-3 flex items-baseline gap-3
+                             border-b border-ink/12 hover:border-rust transition-colors"
+                >
+                  <span className="folio-chrome shrink-0 w-7 group-hover:text-rust transition-colors">
+                    {String(i + 1).padStart(2, "0")}
+                  </span>
+                  <span
+                    className="flex-1 text-ink group-hover:italic transition-all"
+                    style={{
+                      fontFamily: "var(--font-fraunces)",
+                      fontSize: "17px",
+                      lineHeight: 1.4,
+                      fontWeight: 400,
+                    }}
+                  >
+                    {q}
+                  </span>
+                  <span
+                    className="text-rust opacity-0 group-hover:opacity-100 -translate-x-1 group-hover:translate-x-0 transition-all"
+                    aria-hidden
+                  >
+                    ↳
+                  </span>
+                </button>
+              </li>
+            ))}
+          </ul>
         </div>
       </div>
     </div>
   );
 }
-
-function Cap({ label }: { label: string }) {
-  return <span>{label}</span>;
-}
-
-function Dot() {
-  return (
-    <span className="inline-block w-1 h-1 rounded-full bg-ink-30" aria-hidden />
-  );
-}

components/chat/GroundingPill.tsx

@@ -20,7 +20,7 @@ const META: Record<
   ungrounded: {
     label: "Ungrounded",
     tone: "warn",
-    hint: "Answer was generated but doesn't strongly match the source. Treat with caution.",
+    hint: "Answer was generated but doesn't strongly match the source.",
   },
   rejected_low_similarity: {
     label: "No source",
@@ -40,27 +40,21 @@ export function GroundingPill({ status }: { status: GroundingStatus }) {
     tone: "neutral",
     hint: "",
   };
-  const toneCls = {
-    ok: "bg-status-ok-glow text-status-ok",
-    warn: "bg-status-warn-glow text-amber",
-    err: "bg-status-err-glow text-status-err",
-    neutral: "bg-glass text-ink-70",
-  }[meta.tone];
-
-  const ringCls = {
-    ok: "ring-1 ring-status-ok/30",
-    warn: "ring-1 ring-amber/35",
-    err: "ring-1 ring-status-err/30",
-    neutral: "ring-1 ring-glass-border",
+  const cls = {
+    ok: "text-status-ok ring-status-ok/40 bg-status-ok-glow",
+    warn: "text-status-warn ring-status-warn/40 bg-status-warn-glow",
+    err: "text-status-err ring-status-err/40 bg-status-err-glow",
+    neutral: "text-ink-70 ring-ink/24 bg-paper-deep",
   }[meta.tone];
 
   return (
     <span
       title={meta.hint}
       className={clsx(
-        "inline-flex items-center gap-1.5 rounded-pill px-2.5 py-1 text-micro uppercase tracking-[0.12em] font-mono",
-        toneCls,
-        ringCls
+        "inline-flex items-center gap-1.5 rounded-pill px-2.5 py-0.5",
+        "folio-chrome",
+        "ring-1",
+        cls
       )}
     >
       <Dot tone={meta.tone} />
@@ -72,8 +66,8 @@ export function GroundingPill({ status }: { status: GroundingStatus }) {
 function Dot({ tone }: { tone: "ok" | "warn" | "err" | "neutral" }) {
   const cls = {
     ok: "bg-status-ok",
-    warn: "bg-amber",
-    err: "bg-status-err",
+    warn: "bg-status-warn",
+    err: "bg-rust",
     neutral: "bg-ink-50",
   }[tone];
   return <span className={clsx("inline-block w-1.5 h-1.5 rounded-full", cls)} />;

components/chat/Message.tsx

@@ -6,25 +6,50 @@ import { SourceChips } from "./SourceChips";
 import { useState } from "react";
 import clsx from "clsx";
 
-export function UserMessage({ text }: { text: string }) {
+/**
+ * Editorial transcript layout:
+ *   [margin folio]  |  [content column]
+ *
+ * User questions: italic Fraunces ledes, hairline rule beneath.
+ * Assistant answers: drop-cap first letter, IBM Plex body, bibliography below,
+ *                    spec sheet typeset like a magazine colophon.
+ */
+
+export function UserMessage({ text, index }: { text: string; index: number }) {
   return (
-    <div className="flex items-start gap-3 justify-end animate-fade-up">
-      <div className="max-w-[80%] chat-bubble-user">
-        <span className="whitespace-pre-wrap">{text}</span>
+    <article className="grid grid-cols-[80px_1fr] gap-6 animate-fade-up">
+      <div className="text-right pr-2 pt-1">
+        <div className="folio-chrome">№ {String(index + 1).padStart(2, "0")} · Q</div>
       </div>
-      <div className="shrink-0 w-7 h-7 rounded-md bg-glass flex items-center justify-center text-micro font-mono text-ink-70 mt-1"
-        style={{ boxShadow: "0 0 0 1px rgba(255,255,255,0.10)" }}
-      >
-        U
+      <div className="border-t border-ink/16 pt-3">
+        <span className="folio-chrome--ink folio-chrome">Question</span>
+        <p
+          className="italic-display text-ink mt-1.5"
+          style={{
+            fontSize: "clamp(22px, 2.6vw, 30px)",
+            lineHeight: 1.25,
+            letterSpacing: "-0.018em",
+            fontWeight: 400,
+            fontVariationSettings: '"SOFT" 30, "WONK" 1',
+          }}
+        >
+          {text}
+        </p>
       </div>
-    </div>
+    </article>
   );
 }
 
-export function AssistantMessage({ turn }: { turn: ChatTurn }) {
+export function AssistantMessage({
+  turn,
+  index,
+}: {
+  turn: ChatTurn;
+  index: number;
+}) {
   const r = turn.response;
-  if (!r) return null;
   const [copied, setCopied] = useState(false);
+  if (!r) return null;
 
   const copy = async () => {
     try {
@@ -35,40 +60,82 @@ export function AssistantMessage({ turn }: { turn: ChatTurn }) {
   };
 
   return (
-    <div className="flex items-start gap-3 animate-fade-up">
-      <Avatar />
-      <article className="chat-bubble-assistant flex-1 min-w-0 max-w-[88%]">
-        {/* Header: grounding + actions */}
-        <header className="flex items-center justify-between gap-3 mb-3">
-          <GroundingPill status={r._grounding_status} />
-          <div className="flex items-center gap-1">
-            <button
-              onClick={copy}
-              className="text-micro text-ink-50 hover:text-ink hover:bg-glass rounded-md px-2 py-1 transition-colors flex items-center gap-1"
-              title="Copy answer"
-            >
-              {copied ? (
-                <>
-                  <svg width="11" height="11" viewBox="0 0 11 11" fill="none">
-                    <path d="M2 6 4.5 8.5 9 3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
-                  </svg>
-                  copied
-                </>
-              ) : (
-                <>
-                  <svg width="11" height="11" viewBox="0 0 11 11" fill="none">
-                    <rect x="2" y="2" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1.2"/>
-                    <rect x="3.5" y="3.5" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1.2"/>
-                  </svg>
-                  copy
-                </>
-              )}
-            </button>
+    <article className="grid grid-cols-[80px_1fr] gap-6 animate-fade-up">
+      {/* Margin folio */}
+      <div className="text-right pr-2 pt-1">
+        <div className="folio-chrome">
+          № {String(index + 1).padStart(2, "0")} · A
+        </div>
+        <div className="mt-3 folio-chrome text-rust">
+          {r.total_seconds.toFixed(2)}s
+        </div>
+      </div>
+
+      {/* Body column */}
+      <div className="border-t border-ink/16 pt-3">
+        {/* Banner */}
+        <div className="flex items-baseline justify-between mb-3 flex-wrap gap-2">
+          <div className="flex items-baseline gap-3">
+            <span className="folio-chrome--ink folio-chrome">Answer</span>
+            <GroundingPill status={r._grounding_status} />
           </div>
-        </header>
+          <button
+            onClick={copy}
+            className="folio-chrome hover:text-rust transition-colors flex items-center gap-1.5"
+            title="Copy answer"
+          >
+            {copied ? (
+              <>
+                <svg width="11" height="11" viewBox="0 0 11 11" fill="none">
+                  <path
+                    d="M2 6 4.5 8.5 9 3"
+                    stroke="currentColor"
+                    strokeWidth="1.6"
+                    strokeLinecap="round"
+                  />
+                </svg>
+                Copied
+              </>
+            ) : (
+              <>
+                <svg width="11" height="11" viewBox="0 0 11 11" fill="none">
+                  <rect
+                    x="2"
+                    y="2"
+                    width="6"
+                    height="6"
+                    rx="1"
+                    stroke="currentColor"
+                    strokeWidth="1.2"
+                  />
+                  <rect
+                    x="3.5"
+                    y="3.5"
+                    width="6"
+                    height="6"
+                    rx="1"
+                    stroke="currentColor"
+                    strokeWidth="1.2"
+                  />
+                </svg>
+                Copy
+              </>
+            )}
+          </button>
+        </div>
 
-        {/* Answer */}
-        <div className="text-ink leading-[1.65] whitespace-pre-wrap">
+        {/* Answer body — drop-cap, generous reading width */}
+        <div
+          className="drop-cap text-ink"
+          style={{
+            fontFamily: "var(--font-fraunces)",
+            fontSize: "20px",
+            lineHeight: 1.55,
+            fontWeight: 400,
+            maxWidth: "70ch",
+            whiteSpace: "pre-wrap",
+          }}
+        >
           {r.answer}
         </div>
 
@@ -76,98 +143,85 @@ export function AssistantMessage({ turn }: { turn: ChatTurn }) {
         {r.source_docs?.length > 0 && <SourceChips docs={r.source_docs} />}
 
         {/* Spec sheet */}
-        <footer className="mt-4 pt-3 border-t border-glass-border flex flex-wrap items-center gap-x-5 gap-y-1.5 text-micro text-ink-50 font-mono uppercase tracking-[0.10em]">
-          <Spec label="top·sim" value={r._top_similarity?.toFixed(3) ?? "—"} />
-          <Spec label="rerank" value={r._top_rerank_score?.toFixed(2) ?? "—"} />
-          <Spec label="anchor" value={r._anchor_score?.toFixed(3) ?? "—"} />
-          <Spec
-            label="retrieve"
-            value={`${r.retrieve_seconds.toFixed(2)}s`}
-          />
-          <Spec
-            label="inference"
-            value={`${r.inference_seconds.toFixed(2)}s`}
-          />
-          <Spec
-            label="total"
-            value={`${r.total_seconds.toFixed(2)}s`}
-            highlight
-          />
+        <footer className="mt-6 pt-3 border-t border-ink/16">
+          <div className="folio-chrome mb-2">Colophon</div>
+          <div className="grid grid-cols-3 sm:grid-cols-6 gap-x-6 gap-y-3">
+            <Spec label="top·sim" value={r._top_similarity?.toFixed(3) ?? "—"} />
+            <Spec label="rerank" value={r._top_rerank_score?.toFixed(2) ?? "—"} />
+            <Spec label="anchor" value={r._anchor_score?.toFixed(3) ?? "—"} />
+            <Spec
+              label="retrieve"
+              value={`${r.retrieve_seconds.toFixed(2)}s`}
+            />
+            <Spec
+              label="inference"
+              value={`${r.inference_seconds.toFixed(2)}s`}
+            />
+            <Spec label="total" value={`${r.total_seconds.toFixed(2)}s`} accent />
+          </div>
         </footer>
-      </article>
-    </div>
+      </div>
+    </article>
   );
 }
 
-export function ErrorMessage({ turn }: { turn: ChatTurn }) {
+export function ErrorMessage({
+  turn,
+  index,
+}: {
+  turn: ChatTurn;
+  index: number;
+}) {
   const e = turn.error;
   if (!e) return null;
   return (
-    <div className="flex items-start gap-3 animate-fade-up">
-      <Avatar tone="err" />
-      <article
-        className="flex-1 min-w-0 max-w-[88%] rounded-2xl rounded-tl-sm px-5 py-4"
-        style={{
-          background: "rgba(255, 122, 122, 0.06)",
-          boxShadow: "0 0 0 1px rgba(255, 122, 122, 0.28)",
-        }}
-      >
-        <div className="text-micro uppercase tracking-[0.12em] text-status-err font-mono">
-          error · http {e.status || "—"}
-        </div>
-        <div className="text-body-strong text-ink mt-1.5">{e.message}</div>
+    <article className="grid grid-cols-[80px_1fr] gap-6 animate-fade-up">
+      <div className="text-right pr-2 pt-1">
+        <div className="folio-chrome text-rust">Errata</div>
+        <div className="mt-2 folio-chrome">№ {String(index + 1).padStart(2, "0")}</div>
+      </div>
+      <div className="border-t border-rust pt-3">
+        <span className="folio-chrome--rust folio-chrome">
+          HTTP {e.status || "—"}
+        </span>
+        <p
+          className="italic-display text-ink mt-1.5"
+          style={{ fontSize: "20px", lineHeight: 1.3 }}
+        >
+          {e.message}
+        </p>
         {e.status === 502 && (
-          <div className="text-caption text-ink-70 mt-2">
-            Backend not reachable. Check the HF Space stage.
-          </div>
+          <p className="text-caption text-ink-70 mt-3 max-w-prose">
+            The upstream Space appears to be sleeping or building. Try again in
+            a moment.
+          </p>
         )}
-      </article>
-    </div>
+      </div>
+    </article>
   );
 }
 
 function Spec({
   label,
   value,
-  highlight,
+  accent,
 }: {
   label: string;
   value: string;
-  highlight?: boolean;
+  accent?: boolean;
 }) {
   return (
-    <span className="inline-flex items-baseline gap-1">
-      <span>{label}</span>
-      <span className={clsx(highlight ? "text-amber" : "text-ink-70")}>
+    <div>
+      <div className="folio-chrome">{label}</div>
+      <div
+        className={clsx(
+          "font-mono mt-0.5",
+          accent ? "text-rust" : "text-ink"
+        )}
+        style={{ fontSize: "15px", fontWeight: 500 }}
+      >
         {value}
-      </span>
-    </span>
-  );
-}
-
-function Avatar({ tone = "amber" }: { tone?: "amber" | "err" }) {
-  const bg =
-    tone === "err"
-      ? "linear-gradient(135deg, rgba(255,122,122,0.95), rgba(195,70,70,1))"
-      : "linear-gradient(135deg, rgba(255,181,69,0.95), rgba(214,138,31,1))";
-  const ring =
-    tone === "err"
-      ? "0 0 0 1px rgba(255,122,122,0.45), 0 0 14px -2px rgba(255,122,122,0.4)"
-      : "0 0 0 1px rgba(255,181,69,0.45), 0 0 14px -2px rgba(255,181,69,0.45)";
-  return (
-    <div
-      className="shrink-0 w-7 h-7 rounded-md flex items-center justify-center mt-1"
-      style={{ background: bg, boxShadow: ring }}
-    >
-      <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-        <path
-          d="M2.5 7.5 4.8 9.8l6-6.6"
-          stroke="#0a0b10"
-          strokeWidth="1.8"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </svg>
+      </div>
     </div>
   );
 }

components/chat/SettingsDrawer.tsx

@@ -14,78 +14,15 @@ type ParamMeta = {
 };
 
 const PARAMS: ParamMeta[] = [
-  {
-    key: "top_k",
-    label: "Top-K retrieval",
-    desc: "How many docs surface as context. 1 = single best; 3 = blend.",
-    min: 1,
-    max: 3,
-    step: 1,
-  },
-  {
-    key: "max_new_tokens",
-    label: "Max new tokens",
-    desc: "Generation cap. >200 risks repetition under greedy decoding.",
-    min: 32,
-    max: 512,
-    step: 8,
-  },
-  {
-    key: "similarity_threshold",
-    label: "Dense similarity gate",
-    desc: "Reject if dense cosine top-1 below this. Lower = more permissive.",
-    min: 0,
-    max: 1,
-    step: 0.01,
-  },
-  {
-    key: "rerank_threshold",
-    label: "BGE rerank gate",
-    desc: "Reject if BGE cross-encoder score below this. Higher = stricter.",
-    min: -2,
-    max: 5,
-    step: 0.05,
-  },
-  {
-    key: "anchor_threshold",
-    label: "Anchor (topic) gate",
-    desc: "Reject if question is far from every K-means topic centroid.",
-    min: 0,
-    max: 1,
-    step: 0.01,
-  },
-  {
-    key: "scaler",
-    label: "doc-to-lora scaler",
-    desc: "LoRA intensity. 0=ignore doc · 1=normal · >1 amplify · <0 invert.",
-    min: -2,
-    max: 2,
-    step: 0.05,
-  },
-  {
-    key: "bias_scaler",
-    label: "Bias scaler",
-    desc: "Bias-side LoRA intensity. Usually 1.0.",
-    min: -2,
-    max: 2,
-    step: 0.05,
-  },
-  {
-    key: "repetition_penalty",
-    label: "Repetition penalty",
-    desc: "1.0 = off. 1.1–1.2 cuts loops without hurting fluency.",
-    min: 1,
-    max: 2,
-    step: 0.05,
-  },
-  {
-    key: "no_repeat_ngram_size",
-    label: "No-repeat n-gram",
-    desc: "Forbid same n-gram twice. 0=off. 4=cuts most loops.",
-    min: 0,
-    max: 8,
-    step: 1,
-  },
+  { key: "top_k", label: "Top-K retrieval", desc: "How many documents surface as context. 1 = single best; 3 = blend.", min: 1, max: 3, step: 1 },
+  { key: "max_new_tokens", label: "Max new tokens", desc: "Generation cap. >200 risks repetition under greedy decoding.", min: 32, max: 512, step: 8 },
+  { key: "similarity_threshold", label: "Dense similarity gate", desc: "Reject if dense cosine top-1 below this. Lower = more permissive.", min: 0, max: 1, step: 0.01 },
+  { key: "rerank_threshold", label: "BGE rerank gate", desc: "Reject if cross-encoder score below this. Higher = stricter.", min: -2, max: 5, step: 0.05 },
+  { key: "anchor_threshold", label: "Anchor (topic) gate", desc: "Reject if question is far from every K-means topic centroid.", min: 0, max: 1, step: 0.01 },
+  { key: "scaler", label: "doc-to-lora scaler", desc: "LoRA intensity. 0=ignore doc · 1=normal · >1 amplify · <0 invert.", min: -2, max: 2, step: 0.05 },
+  { key: "bias_scaler", label: "Bias scaler", desc: "Bias-side LoRA intensity. Usually 1.0.", min: -2, max: 2, step: 0.05 },
+  { key: "repetition_penalty", label: "Repetition penalty", desc: "1.0 = off. 1.1–1.2 cuts loops without hurting fluency.", min: 1, max: 2, step: 0.05 },
+  { key: "no_repeat_ngram_size", label: "No-repeat n-gram", desc: "Forbid same n-gram twice. 0=off. 4=cuts most loops.", min: 0, max: 8, step: 1 },
 ];
 
 export function SettingsDrawer({
@@ -99,7 +36,6 @@ export function SettingsDrawer({
   const setSettings = useChatStore((s) => s.setSettings);
   const reset = useChatStore((s) => s.resetSettings);
 
-  // ESC to close
   useEffect(() => {
     if (!open) return;
     const onKey = (e: KeyboardEvent) => {
@@ -111,52 +47,65 @@ export function SettingsDrawer({
 
   return (
     <>
-      {/* Scrim */}
       <div
         className={clsx(
-          "fixed inset-0 z-40 bg-canvas-deep/60 backdrop-blur-sm transition-opacity duration-300",
+          "fixed inset-0 z-40 transition-opacity duration-300",
           open ? "opacity-100" : "opacity-0 pointer-events-none"
         )}
+        style={{ background: "rgba(25,23,19,0.20)" }}
         onClick={onClose}
         aria-hidden
       />
-      {/* Panel */}
       <aside
         className={clsx(
-          "fixed top-0 right-0 z-50 h-screen w-full sm:w-[460px] glass-strong",
+          "fixed top-0 right-0 z-50 h-screen w-full sm:w-[480px]",
           "flex flex-col transition-transform duration-300 ease-atelier",
           open ? "translate-x-0" : "translate-x-full"
         )}
+        style={{
+          background: "var(--paper-deep)",
+          boxShadow: "-12px 0 48px -12px rgba(25,23,19,0.20), -1px 0 0 rgba(25,23,19,0.20)",
+        }}
         role="dialog"
         aria-modal="true"
         aria-label="Inference settings"
       >
-        <header className="px-6 py-5 flex items-center justify-between border-b border-glass-border">
-          <div>
-            <div className="text-display-sm">Inference settings</div>
-            <div className="text-caption text-ink-50 mt-0.5">
-              Tune retrieval gates and generation in real time.
-            </div>
+        <header className="px-7 pt-7 pb-5 border-b border-ink/16">
+          <div className="flex items-baseline justify-between mb-2">
+            <span className="folio-chrome">Workshop · Settings</span>
+            <button
+              onClick={onClose}
+              className="p-1.5 -mr-1.5 rounded-md text-ink-50 hover:text-ink hover:bg-ink-08 transition-colors"
+              aria-label="Close"
+            >
+              <svg width="13" height="13" viewBox="0 0 13 13" fill="none">
+                <path
+                  d="m3 3 7 7M10 3l-7 7"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                />
+              </svg>
+            </button>
           </div>
-          <button
-            onClick={onClose}
-            className="p-2 rounded-md text-ink-50 hover:text-ink hover:bg-glass transition-colors"
-            aria-label="Close settings"
+          <h2
+            className="italic-display text-ink"
+            style={{ fontSize: "32px", lineHeight: 1.15 }}
           >
-            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-              <path
-                d="m3 3 8 8M11 3l-8 8"
-                stroke="currentColor"
-                strokeWidth="1.5"
-                strokeLinecap="round"
-              />
-            </svg>
-          </button>
+            Tune the <span className="text-rust">inference.</span>
+          </h2>
+          <p className="text-caption text-ink-70 mt-2 max-w-[36ch]">
+            Adjust retrieval gates and generation behaviour. Changes take
+            effect on the next submitted question.
+          </p>
         </header>
 
-        <div className="flex-1 overflow-y-auto px-6 py-5 space-y-5">
-          {/* use_grounding toggle */}
-          <label className="flex items-start gap-3 p-3 rounded-md bg-glass cursor-pointer hover:bg-glass-stronger transition-colors">
+        <div className="flex-1 overflow-y-auto px-7 py-6 space-y-6">
+          {/* Grounding toggle */}
+          <label
+            className="flex items-start gap-3 p-3 -mx-1 rounded-md cursor-pointer hover:bg-ink-08 transition-colors"
+            style={{ boxShadow: "0 0 0 1px rgba(25,23,19,0.12)" }}
+          >
             <Toggle
               checked={settings.use_grounding}
               onChange={(v) => setSettings({ ...settings, use_grounding: v })}
@@ -165,7 +114,7 @@ export function SettingsDrawer({
               <div className="text-body-strong text-ink">
                 Wrap with grounding instruction
               </div>
-              <div className="text-caption text-ink-50 mt-0.5">
+              <div className="text-caption text-ink-70 mt-0.5">
                 Forces the model to refuse if context is insufficient.
               </div>
             </div>
@@ -183,10 +132,10 @@ export function SettingsDrawer({
           ))}
         </div>
 
-        <footer className="px-6 py-4 border-t border-glass-border flex items-center justify-between">
+        <footer className="px-7 py-4 border-t border-ink/16 flex items-center justify-between">
           <button
             onClick={reset}
-            className="text-caption text-ink-70 hover:text-ink transition-colors flex items-center gap-1.5"
+            className="folio-chrome flex items-center gap-1.5 hover:text-rust transition-colors"
           >
             <svg width="11" height="11" viewBox="0 0 11 11" fill="none">
               <path
@@ -199,7 +148,7 @@ export function SettingsDrawer({
             </svg>
             Reset to defaults
           </button>
-          <button onClick={onClose} className="btn-primary text-caption">
+          <button onClick={onClose} className="btn-primary">
             Done
           </button>
         </footer>
@@ -217,22 +166,21 @@ function ParamSlider({
   value: number;
   onChange: (v: number) => void;
 }) {
-  const isDefault =
-    (DEFAULT_SETTINGS[meta.key] as number) === value;
-  const displayValue =
+  const isDefault = (DEFAULT_SETTINGS[meta.key] as number) === value;
+  const display =
     meta.step < 1 ? value.toFixed(2) : Math.round(value).toString();
 
   return (
     <div>
-      <div className="flex items-center justify-between mb-1.5">
+      <div className="flex items-baseline justify-between mb-1.5">
         <label className="text-body-strong text-ink">{meta.label}</label>
         <span
           className={clsx(
-            "text-caption font-mono",
-            isDefault ? "text-ink-50" : "text-amber"
+            "font-mono text-caption",
+            isDefault ? "text-ink-50" : "text-rust"
           )}
         >
-          {displayValue}
+          {display}
         </span>
       </div>
       <input
@@ -242,10 +190,10 @@ function ParamSlider({
         step={meta.step}
         value={value}
         onChange={(e) => onChange(parseFloat(e.target.value))}
-        className="w-full accent-amber"
+        className="w-full accent-rust"
         aria-label={meta.label}
       />
-      <p className="text-micro text-ink-50 mt-1.5">{meta.desc}</p>
+      <p className="text-caption text-ink-70 mt-1.5">{meta.desc}</p>
     </div>
   );
 }
@@ -265,15 +213,16 @@ function Toggle({
       onClick={() => onChange(!checked)}
       className={clsx(
         "relative w-9 h-5 rounded-pill transition-colors duration-200 shrink-0 mt-0.5",
-        checked ? "bg-amber" : "bg-glass-stronger"
+        checked ? "bg-rust" : "bg-paper-edge"
       )}
-      style={{ boxShadow: "0 0 0 1px rgba(255,255,255,0.10)" }}
+      style={{ boxShadow: "inset 0 0 0 1px rgba(25,23,19,0.18)" }}
     >
       <span
         className={clsx(
-          "absolute top-0.5 w-4 h-4 rounded-full bg-canvas-deep transition-transform duration-200",
+          "absolute top-0.5 w-4 h-4 rounded-full bg-paper transition-transform duration-200",
           checked ? "translate-x-[18px]" : "translate-x-0.5"
         )}
+        style={{ boxShadow: "0 1px 2px rgba(25,23,19,0.25)" }}
       />
     </button>
   );

components/chat/Sidebar.tsx

@@ -5,6 +5,10 @@ import { usePathname } from "next/navigation";
 import { useChatStore } from "@/lib/chatStore";
 import clsx from "clsx";
 
+/**
+ * Catalog sidebar — magazine table-of-contents vibe.
+ * Each conversation is a folio entry, numbered, with a hairline rule below.
+ */
 export function Sidebar() {
   const pathname = usePathname();
   const sidebarOpen = useChatStore((s) => s.sidebarOpen);
@@ -18,16 +22,39 @@ export function Sidebar() {
   return (
     <aside
       className={clsx(
-        "shrink-0 h-[calc(100vh-3.5rem)] sticky top-14 z-20",
+        "shrink-0 sticky z-20 self-start",
         "transition-[width,opacity] duration-300 ease-atelier",
         sidebarOpen
-          ? "w-[280px] opacity-100"
+          ? "w-[300px] opacity-100"
           : "w-0 opacity-0 pointer-events-none"
       )}
+      style={{
+        top: "calc(var(--topbar-h, 88px))",
+        height: "calc(100vh - var(--topbar-h, 88px))",
+      }}
     >
-      <div className="h-full overflow-hidden border-r border-glass-border bg-canvas-deep/40 backdrop-blur-glass flex flex-col">
-        {/* New chat */}
-        <div className="p-4">
+      <div
+        className="h-full overflow-hidden flex flex-col"
+        style={{
+          background: "var(--paper-deep)",
+          boxShadow: "1px 0 0 rgba(25,23,19,0.12)",
+        }}
+      >
+        {/* Header: Catalog */}
+        <div className="px-5 pt-5 pb-3">
+          <div className="folio-chrome">Catalog</div>
+          <h2
+            className="italic-display text-ink mt-1"
+            style={{ fontSize: "26px", lineHeight: 1.05 }}
+          >
+            Recent <span className="not-italic font-display font-medium not-italic-fix">interrogations.</span>
+          </h2>
+        </div>
+
+        <div className="hairline mx-5" />
+
+        {/* New conversation */}
+        <div className="px-5 py-4">
           <button
             onClick={() => {
               newConversation();
@@ -36,129 +63,161 @@ export function Sidebar() {
                 window.dispatchEvent(new PopStateEvent("popstate"));
               }
             }}
-            className="w-full flex items-center gap-2.5 px-4 py-3 rounded-md
-                       bg-amber/10 text-amber
-                       hover:bg-amber/15 transition-colors
-                       text-body-strong"
-            style={{ boxShadow: "0 0 0 1px rgba(255,181,69,0.28)" }}
+            className="group w-full flex items-center justify-between
+                       py-2.5 px-3 rounded-md
+                       text-ink hover:text-paper hover:bg-ink
+                       transition-all"
+            style={{ boxShadow: "0 0 0 1px rgba(25,23,19,0.18)" }}
           >
-            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-              <path
-                d="M7 2v10M2 7h10"
-                stroke="currentColor"
-                strokeWidth="1.6"
-                strokeLinecap="round"
-              />
-            </svg>
-            <span>New conversation</span>
+            <span className="flex items-center gap-2.5">
+              <svg width="13" height="13" viewBox="0 0 13 13" fill="none">
+                <path
+                  d="M6.5 1.5v10M1.5 6.5h10"
+                  stroke="currentColor"
+                  strokeWidth="1.4"
+                  strokeLinecap="round"
+                />
+              </svg>
+              <span className="text-body-strong">Begin new transcript</span>
+            </span>
+            <span className="folio-chrome group-hover:text-paper transition-colors">⌘N</span>
           </button>
         </div>
 
-        {/* Sections */}
-        <nav className="px-3 pb-3 flex flex-col gap-0.5">
-          <NavLink
-            href="/"
-            active={pathname === "/"}
-            label="Chat"
-            icon={<IconSpark />}
-          />
+        {/* Sections (folio nav) */}
+        <nav className="px-3 pb-2 flex flex-col">
+          <NavLink href="/" active={pathname === "/"} folio="I" label="Transcript" />
           <NavLink
             href="/documents"
             active={pathname.startsWith("/documents")}
-            label="Documents"
-            icon={<IconDoc />}
+            folio="II"
+            label="Library"
           />
           <NavLink
             href="/system"
             active={pathname.startsWith("/system")}
-            label="System"
-            icon={<IconPulse />}
+            folio="III"
+            label="Colophon"
           />
         </nav>
 
-        <div className="hairline mx-4 my-2" />
+        <div className="hairline mx-5 my-2" />
 
-        {/* Conversation history */}
-        <div className="px-3 flex-1 overflow-y-auto">
-          <div className="px-3 py-2 text-micro uppercase tracking-[0.15em] text-ink-50">
-            Recent
-          </div>
-          {list.length === 0 && (
-            <div className="px-3 py-4 text-caption text-ink-50">
-              No conversations yet.
+        {/* Recent transcripts */}
+        <div className="flex-1 overflow-y-auto px-3 pt-2 pb-4">
+          <div className="px-2 pb-2 folio-chrome">Index of transcripts</div>
+          {list.length === 0 ? (
+            <div className="px-3 py-3 text-caption text-ink-50 italic">
+              <span className="italic-display">No interrogations yet.</span>
             </div>
-          )}
-          <ul className="flex flex-col gap-0.5">
-            {list.map((c) => (
-              <li key={c.id} className="group relative">
-                <button
-                  onClick={() => {
-                    openConversation(c.id);
-                    if (pathname !== "/") {
-                      window.history.pushState(null, "", "/");
-                      window.dispatchEvent(new PopStateEvent("popstate"));
-                    }
-                    if (window.innerWidth < 768) setSidebarOpen(false);
-                  }}
-                  className={clsx(
-                    "w-full text-left px-3 py-2 rounded-md transition-colors",
-                    "flex items-start gap-2 min-w-0",
-                    activeId === c.id && pathname === "/"
-                      ? "bg-glass-stronger text-ink"
-                      : "text-ink-70 hover:text-ink hover:bg-glass"
-                  )}
-                >
-                  <span className="text-caption truncate flex-1 min-w-0">
-                    {c.title}
-                  </span>
-                  <span className="text-micro text-ink-30 font-mono shrink-0 mt-0.5">
-                    {formatRelative(c.updatedAt)}
-                  </span>
-                </button>
-                <button
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    if (window.confirm(`Delete "${c.title}"?`)) {
-                      deleteConversation(c.id);
-                    }
-                  }}
-                  className="absolute right-2 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100
-                             p-1 rounded text-ink-50 hover:text-status-err hover:bg-status-err-glow
-                             transition-all"
-                  aria-label="Delete conversation"
-                  title="Delete"
-                >
-                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-                    <path
-                      d="M3 3l6 6M9 3l-6 6"
-                      stroke="currentColor"
-                      strokeWidth="1.4"
-                      strokeLinecap="round"
+          ) : (
+            <ul>
+              {list.map((c, idx) => {
+                const folio = String(idx + 1).padStart(2, "0");
+                const active = activeId === c.id && pathname === "/";
+                return (
+                  <li key={c.id} className="relative group">
+                    <button
+                      onClick={() => {
+                        openConversation(c.id);
+                        if (pathname !== "/") {
+                          window.history.pushState(null, "", "/");
+                          window.dispatchEvent(new PopStateEvent("popstate"));
+                        }
+                        if (window.innerWidth < 768) setSidebarOpen(false);
+                      }}
+                      className={clsx(
+                        "w-full text-left px-2 py-3 transition-colors flex items-start gap-3 rounded-sm",
+                        active
+                          ? "bg-ink text-paper"
+                          : "text-ink hover:bg-ink-08"
+                      )}
+                    >
+                      <span
+                        className={clsx(
+                          "shrink-0 mt-0.5 font-mono",
+                          active ? "text-paper/70" : "text-rust"
+                        )}
+                        style={{
+                          fontSize: "10px",
+                          letterSpacing: "0.18em",
+                          fontWeight: 600,
+                        }}
+                      >
+                        № {folio}
+                      </span>
+                      <span className="min-w-0 flex-1">
+                        <span
+                          className={clsx(
+                            "block truncate text-body",
+                            active ? "text-paper" : "text-ink"
+                          )}
+                          style={{ fontWeight: active ? 500 : 400 }}
+                        >
+                          {c.title}
+                        </span>
+                        <span
+                          className={clsx(
+                            "block mt-0.5 folio-chrome",
+                            active && "text-paper/60"
+                          )}
+                        >
+                          {formatRelative(c.updatedAt)} · {c.turns.length}{" "}
+                          turn{c.turns.length === 1 ? "" : "s"}
+                        </span>
+                      </span>
+                    </button>
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        if (window.confirm(`Delete "${c.title}"?`)) {
+                          deleteConversation(c.id);
+                        }
+                      }}
+                      className={clsx(
+                        "absolute right-2 top-3 opacity-0 group-hover:opacity-100",
+                        "p-1 rounded text-ink-50 hover:text-rust hover:bg-rust-glow",
+                        "transition-all",
+                        active && "text-paper/60 hover:text-paper hover:bg-rust"
+                      )}
+                      aria-label="Delete transcript"
+                      title="Delete"
+                    >
+                      <svg width="11" height="11" viewBox="0 0 11 11" fill="none">
+                        <path
+                          d="M2.5 2.5l6 6M8.5 2.5l-6 6"
+                          stroke="currentColor"
+                          strokeWidth="1.4"
+                          strokeLinecap="round"
+                        />
+                      </svg>
+                    </button>
+                    <div
+                      className={clsx(
+                        "h-px mx-2",
+                        active ? "bg-transparent" : "bg-ink/12"
+                      )}
                     />
-                  </svg>
-                </button>
-              </li>
-            ))}
-          </ul>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
         </div>
 
-        {/* Footer */}
-        <div className="px-4 py-3 border-t border-glass-border">
+        {/* Footer colophon */}
+        <div
+          className="px-5 py-4 border-t border-ink/12"
+          style={{ background: "rgba(0,0,0,0.02)" }}
+        >
           <a
             href="https://huggingface.co/spaces/Etiya/d2l-api"
             target="_blank"
             rel="noopener noreferrer"
-            className="flex items-center justify-between text-micro uppercase tracking-[0.12em] text-ink-50 hover:text-ink-70 transition-colors"
+            className="folio-chrome flex items-center justify-between hover:text-rust transition-colors"
           >
-            <span>HF Space · backend</span>
-            <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
-              <path
-                d="M3 3h4v4M7 3 3 7"
-                stroke="currentColor"
-                strokeWidth="1.3"
-                strokeLinecap="round"
-              />
-            </svg>
+            <span>Imprint · HF Space</span>
+            <span aria-hidden>↗</span>
           </a>
         </div>
       </div>
@@ -169,26 +228,52 @@ export function Sidebar() {
 function NavLink({
   href,
   active,
+  folio,
   label,
-  icon,
 }: {
   href: string;
   active: boolean;
+  folio: string;
   label: string;
-  icon: React.ReactNode;
 }) {
   return (
     <Link
       href={href}
       className={clsx(
-        "flex items-center gap-3 px-3 py-2 rounded-md transition-all",
-        active
-          ? "bg-glass-stronger text-ink"
-          : "text-ink-70 hover:text-ink hover:bg-glass"
+        "group flex items-baseline gap-3 px-3 py-2 rounded-sm transition-colors",
+        active ? "text-rust" : "text-ink hover:text-rust"
       )}
     >
-      <span className={clsx("w-4 h-4", active && "text-amber")}>{icon}</span>
-      <span className="text-body">{label}</span>
+      <span
+        className="folio-chrome shrink-0 w-7"
+        style={{ color: active ? "var(--rust)" : undefined }}
+      >
+        {folio}
+      </span>
+      <span
+        className={clsx(
+          "flex-1 transition-all",
+          active ? "italic" : "group-hover:italic"
+        )}
+        style={{
+          fontFamily: active ? "var(--font-fraunces)" : "var(--font-plex)",
+          fontSize: active ? "20px" : "16px",
+          fontWeight: active ? 400 : 500,
+          lineHeight: 1.1,
+          fontVariationSettings: active ? '"SOFT" 30, "WONK" 1' : undefined,
+        }}
+      >
+        {label}{active && "."}
+      </span>
+      <span
+        className={clsx(
+          "transition-transform shrink-0 text-rust",
+          active ? "translate-x-0 opacity-100" : "-translate-x-2 opacity-0 group-hover:translate-x-0 group-hover:opacity-100"
+        )}
+        aria-hidden
+      >
+        →
+      </span>
     </Link>
   );
 }
@@ -196,51 +281,14 @@ function NavLink({
 function formatRelative(ts: number): string {
   const diff = Date.now() - ts;
   const min = Math.floor(diff / 60_000);
-  if (min < 1) return "now";
-  if (min < 60) return `${min}m`;
+  if (min < 1) return "just now";
+  if (min < 60) return `${min}m ago`;
   const hr = Math.floor(min / 60);
-  if (hr < 24) return `${hr}h`;
+  if (hr < 24) return `${hr}h ago`;
   const d = Math.floor(hr / 24);
-  if (d < 7) return `${d}d`;
-  return new Date(ts).toLocaleDateString(undefined, { month: "short", day: "numeric" });
-}
-
-function IconSpark() {
-  return (
-    <svg viewBox="0 0 16 16" fill="none" className="w-full h-full">
-      <path
-        d="M8 1.5v3M8 11.5v3M1.5 8h3M11.5 8h3M3.5 3.5l2 2M10.5 10.5l2 2M3.5 12.5l2-2M10.5 5.5l2-2"
-        stroke="currentColor"
-        strokeWidth="1.4"
-        strokeLinecap="round"
-      />
-    </svg>
-  );
-}
-
-function IconDoc() {
-  return (
-    <svg viewBox="0 0 16 16" fill="none" className="w-full h-full">
-      <path
-        d="M3.5 1.5h6l3.5 3.5v9a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-12a.5.5 0 0 1 .5-.5z"
-        stroke="currentColor"
-        strokeWidth="1.4"
-      />
-      <path d="M9.5 1.5V5h3.5" stroke="currentColor" strokeWidth="1.4" />
-    </svg>
-  );
-}
-
-function IconPulse() {
-  return (
-    <svg viewBox="0 0 16 16" fill="none" className="w-full h-full">
-      <path
-        d="M1.5 8h3l1.5-4 3 8L10.5 8h4"
-        stroke="currentColor"
-        strokeWidth="1.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
+  if (d < 7) return `${d}d ago`;
+  return new Date(ts).toLocaleDateString(undefined, {
+    month: "short",
+    day: "numeric",
+  });
 }

components/chat/SourceChips.tsx

@@ -4,46 +4,51 @@ import type { SourceDoc } from "@/lib/types";
 import { useState } from "react";
 import clsx from "clsx";
 
+/**
+ * Source list — bibliography style.
+ * Numbered entries, italic title, hairline below, expandable scores.
+ */
 export function SourceChips({ docs }: { docs: SourceDoc[] }) {
   const [expanded, setExpanded] = useState<string | null>(null);
   if (!docs?.length) return null;
 
   return (
-    <div className="mt-4 flex flex-col gap-2">
-      <div className="text-micro uppercase tracking-[0.12em] text-ink-50 font-mono">
-        Sources · {docs.length}
+    <section className="mt-6">
+      <div className="flex items-baseline justify-between mb-2">
+        <span className="folio-chrome">Bibliography</span>
+        <span className="folio-chrome">{docs.length} entr{docs.length === 1 ? "y" : "ies"}</span>
       </div>
-      <ul className="flex flex-col gap-1.5">
-        {docs.map((d) => {
+      <ul className="border-t border-ink/16">
+        {docs.map((d, i) => {
           const isOpen = expanded === d.doc_id;
           const sim = d.similarity ?? d.dense_similarity ?? 0;
           return (
-            <li key={d.doc_id}>
+            <li key={d.doc_id} className="border-b border-ink/12">
               <button
                 onClick={() => setExpanded(isOpen ? null : d.doc_id)}
-                className={clsx(
-                  "w-full text-left rounded-md px-3 py-2 transition-all",
-                  "flex items-center gap-3",
-                  isOpen
-                    ? "bg-glass-stronger"
-                    : "bg-glass hover:bg-glass-stronger"
-                )}
-                style={{ boxShadow: "0 0 0 1px rgba(255,255,255,0.07)" }}
+                className="w-full text-left py-3 flex items-baseline gap-4 group"
               >
-                <SimilarityRing value={sim} />
-                <div className="min-w-0 flex-1">
-                  <div className="text-caption-strong text-ink truncate">
+                <span className="folio-chrome--ink folio-chrome shrink-0 w-7">
+                  {String(i + 1).padStart(2, "0")}
+                </span>
+                <span className="min-w-0 flex-1">
+                  <span
+                    className="block italic-display text-ink truncate group-hover:text-rust transition-colors"
+                    style={{ fontSize: "16px", lineHeight: 1.3 }}
+                  >
                     {d.name}
-                  </div>
-                  <div className="text-micro font-mono text-ink-50 truncate">
+                  </span>
+                  <span className="block mt-0.5 folio-chrome">
                     {d.doc_id}
-                  </div>
-                </div>
+                  </span>
+                </span>
+                <SimilarityRing value={sim} />
                 <span
                   className={clsx(
                     "text-ink-50 transition-transform shrink-0",
                     isOpen && "rotate-180"
                   )}
+                  aria-hidden
                 >
                   <svg width="11" height="11" viewBox="0 0 11 11" fill="none">
                     <path
@@ -56,10 +61,7 @@ export function SourceChips({ docs }: { docs: SourceDoc[] }) {
                 </span>
               </button>
               {isOpen && (
-                <div
-                  className="mt-1.5 px-3 py-3 rounded-md bg-canvas-deep/70 grid grid-cols-3 gap-3 animate-fade-in"
-                  style={{ boxShadow: "0 0 0 1px rgba(255,255,255,0.06)" }}
-                >
+                <div className="pb-4 grid grid-cols-3 gap-6 animate-fade-in">
                   <Metric label="Cosine" value={fmt(d.similarity)} />
                   <Metric label="Dense" value={fmt(d.dense_similarity)} />
                   <Metric label="Rerank" value={fmt(d.rerank_score, 2)} />
@@ -69,17 +71,20 @@ export function SourceChips({ docs }: { docs: SourceDoc[] }) {
           );
         })}
       </ul>
-    </div>
+    </section>
   );
 }
 
 function Metric({ label, value }: { label: string; value: string }) {
   return (
     <div>
-      <div className="text-micro uppercase tracking-[0.12em] text-ink-50">
-        {label}
+      <div className="folio-chrome">{label}</div>
+      <div
+        className="font-mono text-ink mt-0.5"
+        style={{ fontSize: "16px", fontWeight: 500 }}
+      >
+        {value}
       </div>
-      <div className="text-body-strong font-mono text-ink mt-0.5">{value}</div>
     </div>
   );
 }
@@ -93,41 +98,41 @@ function SimilarityRing({ value }: { value: number }) {
   const v = Math.max(0, Math.min(1, value || 0));
   const tone =
     v >= 0.7
-      ? "rgb(93, 214, 168)"
+      ? "var(--rust)"
       : v >= 0.45
-      ? "rgb(255, 181, 69)"
-      : "rgba(245, 243, 236, 0.4)";
-  const r = 9;
+      ? "rgba(25, 23, 19, 0.85)"
+      : "rgba(25, 23, 19, 0.35)";
+  const r = 11;
   const C = 2 * Math.PI * r;
   const dash = C * v;
   return (
-    <svg width="22" height="22" viewBox="0 0 22 22" className="shrink-0">
+    <svg width="28" height="28" viewBox="0 0 28 28" className="shrink-0">
       <circle
-        cx="11"
-        cy="11"
+        cx="14"
+        cy="14"
         r={r}
-        stroke="rgba(255,255,255,0.10)"
-        strokeWidth="2"
+        stroke="rgba(25,23,19,0.18)"
+        strokeWidth="1.5"
         fill="none"
       />
       <circle
-        cx="11"
-        cy="11"
+        cx="14"
+        cy="14"
         r={r}
         stroke={tone}
-        strokeWidth="2"
+        strokeWidth="1.8"
         fill="none"
         strokeLinecap="round"
         strokeDasharray={`${dash} ${C - dash}`}
-        transform="rotate(-90 11 11)"
+        transform="rotate(-90 14 14)"
         style={{ transition: "stroke-dasharray 0.4s cubic-bezier(0.16,1,0.3,1)" }}
       />
       <text
-        x="11"
-        y="13.5"
+        x="14"
+        y="16.5"
         textAnchor="middle"
-        fontSize="7"
-        fill="rgba(245, 243, 236, 0.85)"
+        fontSize="8"
+        fill="rgba(25, 23, 19, 0.85)"
         fontFamily="var(--font-mono), monospace"
         fontWeight="600"
       >

components/chat/Thinking.tsx

@@ -1,17 +1,30 @@
 "use client";
 
-const STAGES = ["retrieving", "reranking", "grounding", "generating"];
+const STAGES = ["Retrieving", "Reranking", "Grounding", "Generating"];
 
+/**
+ * Thinking placeholder. Editorial: a folio mark, italic running header,
+ * three pulsing dots in mono.
+ */
 export function Thinking() {
   return (
-    <div className="flex items-start gap-3 animate-fade-in">
-      <Avatar />
-      <div className="chat-bubble-assistant flex-1 min-w-0">
-        <div className="flex items-center gap-2.5">
-          <Dots />
-          <span className="text-caption text-ink-70 text-shimmer">
+    <div className="grid grid-cols-[80px_1fr] gap-6 animate-fade-in">
+      <div className="text-right pr-2 pt-1">
+        <div className="folio-chrome">Pending</div>
+      </div>
+      <div className="border-t border-ink/16 pt-3">
+        <div className="flex items-baseline gap-3">
+          <span
+            className="italic-display text-ink-50"
+            style={{
+              fontSize: "20px",
+              lineHeight: 1.2,
+              fontVariationSettings: '"SOFT" 30, "WONK" 1',
+            }}
+          >
             {STAGES.join(" · ")}
           </span>
+          <Dots />
         </div>
       </div>
     </div>
@@ -22,41 +35,17 @@ function Dots() {
   return (
     <span className="inline-flex items-center gap-1">
       <span
-        className="w-1.5 h-1.5 rounded-full bg-amber animate-thinking-dot"
+        className="w-1.5 h-1.5 rounded-full bg-rust animate-thinking-dot"
         style={{ animationDelay: "0s" }}
       />
       <span
-        className="w-1.5 h-1.5 rounded-full bg-amber animate-thinking-dot"
-        style={{ animationDelay: "0.16s" }}
+        className="w-1.5 h-1.5 rounded-full bg-rust animate-thinking-dot"
+        style={{ animationDelay: "0.18s" }}
       />
       <span
-        className="w-1.5 h-1.5 rounded-full bg-amber animate-thinking-dot"
-        style={{ animationDelay: "0.32s" }}
+        className="w-1.5 h-1.5 rounded-full bg-rust animate-thinking-dot"
+        style={{ animationDelay: "0.36s" }}
       />
     </span>
   );
 }
-
-function Avatar() {
-  return (
-    <div
-      className="shrink-0 w-7 h-7 rounded-md flex items-center justify-center"
-      style={{
-        background:
-          "linear-gradient(135deg, rgba(255,181,69,0.95), rgba(214,138,31,1))",
-        boxShadow:
-          "0 0 0 1px rgba(255,181,69,0.45), 0 0 14px -2px rgba(255,181,69,0.45)",
-      }}
-    >
-      <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-        <path
-          d="M2.5 7.5 4.8 9.8l6-6.6"
-          stroke="#0a0b10"
-          strokeWidth="1.8"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </svg>
-    </div>
-  );
-}

components/chat/Thread.tsx

@@ -6,7 +6,9 @@ import { AssistantMessage, ErrorMessage, UserMessage } from "./Message";
 import { Thinking } from "./Thinking";
 
 export function Thread() {
-  const conv = useChatStore((s) => (s.activeId ? s.conversations[s.activeId] : null));
+  const conv = useChatStore((s) =>
+    s.activeId ? s.conversations[s.activeId] : null
+  );
   const ref = useRef<HTMLDivElement | null>(null);
 
   // Auto-scroll to bottom on new turns
@@ -20,15 +22,36 @@ export function Thread() {
 
   return (
     <div ref={ref} className="flex-1 overflow-y-auto">
-      <div className="max-w-[920px] mx-auto px-4 sm:px-6 py-8 space-y-6">
-        {conv.turns.map((t) => (
-          <div key={t.id} className="space-y-4">
-            <UserMessage text={t.question} />
-            {t.pending && <Thinking />}
-            {t.error && <ErrorMessage turn={t} />}
-            {t.response && <AssistantMessage turn={t} />}
+      <div className="max-w-[1040px] mx-auto px-6 md:px-10 py-10">
+        {/* Transcript header */}
+        <header className="grid grid-cols-[80px_1fr] gap-6 mb-8 animate-fade-in">
+          <div className="text-right pr-2">
+            <div className="folio-chrome">Transcript</div>
+          </div>
+          <div className="border-b-2 border-ink/30 pb-3 flex items-baseline justify-between flex-wrap gap-2">
+            <h1
+              className="italic-display text-ink"
+              style={{ fontSize: "32px", lineHeight: 1.1 }}
+            >
+              {conv.title}
+            </h1>
+            <span className="folio-chrome">
+              {conv.turns.length} turn{conv.turns.length === 1 ? "" : "s"} ·{" "}
+              {new Date(conv.createdAt).toLocaleDateString()}
+            </span>
           </div>
-        ))}
+        </header>
+
+        <div className="space-y-10">
+          {conv.turns.map((t, i) => (
+            <div key={t.id} className="space-y-8">
+              <UserMessage text={t.question} index={i} />
+              {t.pending && <Thinking />}
+              {t.error && <ErrorMessage turn={t} index={i} />}
+              {t.response && <AssistantMessage turn={t} index={i} />}
+            </div>
+          ))}
+        </div>
       </div>
     </div>
   );

components/chat/TopBar.tsx

@@ -6,6 +6,10 @@ import { api } from "@/lib/api";
 import { useChatStore } from "@/lib/chatStore";
 import clsx from "clsx";
 
+/**
+ * Magazine masthead. Vol/Issue/folio chrome on the left, brand/title centered,
+ * status pulse on the right.
+ */
 export function TopBar() {
   const [pulse, setPulse] = useState<"alive" | "down" | "loading">("loading");
   const [pingMs, setPingMs] = useState<number | null>(null);
@@ -37,64 +41,84 @@ export function TopBar() {
     };
   }, []);
 
+  const today = new Date().toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "2-digit",
+  });
+
   return (
-    <header className="sticky top-0 z-30 h-14 flex items-center backdrop-blur-nav bg-canvas-deep/60 border-b border-glass-border">
-      <div className="container-app flex items-center justify-between w-full">
-        {/* Left: brand + sidebar toggle */}
-        <div className="flex items-center gap-3">
-          <button
-            onClick={toggleSidebar}
-            className="md:flex hidden p-2 rounded-md text-ink-50 hover:text-ink hover:bg-glass transition-colors"
-            aria-label="Toggle sidebar"
-          >
-            <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
-              <path
-                d="M3 5h12M3 9h12M3 13h12"
-                stroke="currentColor"
-                strokeWidth="1.5"
-                strokeLinecap="round"
-              />
-            </svg>
-          </button>
-          <Link href="/" className="flex items-center gap-2.5 group">
-            <Mark />
-            <div className="leading-none">
-              <div className="text-body-strong text-ink">
-                doc<span className="text-amber">·</span>to
-                <span className="text-amber">·</span>lora
-              </div>
-              <div className="text-micro text-ink-50 mt-0.5 uppercase tracking-[0.18em]">
-                Etiya BSS Atelier
-              </div>
-            </div>
-          </Link>
+    <header className="relative z-30 sticky top-0 bg-paper/85 backdrop-blur-sm">
+      {/* Top thin issue-strip */}
+      <div className="border-b border-ink/12">
+        <div className="container-app py-1.5 flex items-center justify-between text-[10px] folio-chrome">
+          <span>Vol. I · Issue 02 · Etiya BSS Atelier · {today}</span>
+          <span className="hidden md:inline">EN · UTC+3 · ISTANBUL</span>
         </div>
+      </div>
+
+      {/* Masthead */}
+      <div className="border-b border-ink/16">
+        <div className="container-app py-3 flex items-center justify-between gap-4">
+          {/* Left: sidebar toggle + brand */}
+          <div className="flex items-center gap-3">
+            <button
+              onClick={toggleSidebar}
+              className="hidden md:inline-flex p-2 rounded-md text-ink-50 hover:text-ink hover:bg-ink-08 transition-colors"
+              aria-label="Toggle catalog"
+            >
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M2 4h12M2 8h12M2 12h12"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                />
+              </svg>
+            </button>
+            <Link href="/" className="flex items-center gap-2.5 group">
+              <Mark />
+              <div className="leading-tight">
+                <div
+                  className="italic-display text-ink"
+                  style={{ fontSize: "26px", lineHeight: 1, letterSpacing: "-0.02em" }}
+                >
+                  doc<span className="text-rust">·</span>to
+                  <span className="text-rust">·</span>lora
+                </div>
+                <div className="folio-chrome mt-1">
+                  An interrogation atelier
+                </div>
+              </div>
+            </Link>
+          </div>
 
-        {/* Right: status pulse */}
-        <div className="flex items-center gap-3">
-          <span
-            className="hidden sm:flex items-center gap-2 rounded-pill px-3 py-1.5 bg-glass"
-            style={{ boxShadow: "0 0 0 1px rgba(255,255,255,0.08)" }}
-            aria-live="polite"
-          >
+          {/* Right: status */}
+          <div className="flex items-center gap-3">
             <span
-              className={clsx(
-                "inline-block w-1.5 h-1.5 rounded-full transition-colors",
-                pulse === "alive"
-                  ? "bg-status-ok shadow-[0_0_8px_rgba(93,214,168,0.8)] animate-pulse-soft"
+              className="hidden sm:flex items-center gap-2 px-3 py-1.5 rounded-pill bg-paper-deep"
+              style={{ boxShadow: "0 0 0 1px rgba(25,23,19,0.18)" }}
+              aria-live="polite"
+            >
+              <span
+                className={clsx(
+                  "inline-block w-1.5 h-1.5 rounded-full transition-colors",
+                  pulse === "alive"
+                    ? "bg-status-ok animate-ink-pulse"
+                    : pulse === "down"
+                    ? "bg-rust"
+                    : "bg-ink-50"
+                )}
+              />
+              <span className="folio-chrome--ink folio-chrome">
+                {pulse === "alive"
+                  ? `Live · ${pingMs?.toFixed(0) ?? "—"}ms`
                   : pulse === "down"
-                  ? "bg-status-err"
-                  : "bg-ink-50"
-              )}
-            />
-            <span className="text-micro text-ink-70 font-mono uppercase tracking-[0.15em]">
-              {pulse === "alive"
-                ? `live · ${pingMs?.toFixed(0) ?? "—"}ms`
-                : pulse === "down"
-                ? "down"
-                : "···"}
+                  ? "Down"
+                  : "···"}
+              </span>
             </span>
-          </span>
+          </div>
         </div>
       </div>
     </header>
@@ -104,23 +128,23 @@ export function TopBar() {
 function Mark() {
   return (
     <span
-      className="relative inline-flex items-center justify-center w-8 h-8 rounded-md"
+      className="relative inline-flex items-center justify-center w-9 h-9 rounded-md"
       style={{
-        background:
-          "linear-gradient(135deg, rgba(255,181,69,0.95) 0%, rgba(214,138,31,1) 100%)",
-        boxShadow:
-          "0 0 0 1px rgba(255,181,69,0.4), 0 0 20px -2px rgba(255,181,69,0.5)",
+        background: "var(--rust)",
+        boxShadow: "0 0 0 1px rgba(200,77,44,0.35), 0 1px 0 rgba(255,255,255,0.4) inset",
       }}
     >
-      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-        <path
-          d="M2.5 8.5 5 11l6-7"
-          stroke="#0a0b10"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </svg>
+      <span
+        className="italic-display"
+        style={{
+          fontSize: "22px",
+          lineHeight: 1,
+          color: "#f4ede0",
+          fontWeight: 400,
+        }}
+      >
+        d
+      </span>
     </span>
   );
 }

tailwind.config.ts

@@ -1,12 +1,13 @@
 import type { Config } from "tailwindcss";
 
 /**
- * Etiya doc-to-lora — Twilight Atelier design tokens.
+ * Etiya doc-to-lora — Risograph Folio.
  *
- * Aesthetic: A research notebook at dusk. Deep indigo canvas warmed by a
- * single luminous amber, atmospheric aurora behind glass surfaces, editorial
- * serif italics carrying display moments. Sober enough for enterprise BSS,
- * soulful enough to belong in an AI atelier.
+ * A printed-publication aesthetic for an AI corpus. Two-color riso ink on
+ * warm parchment, halftone textures instead of gradients, Fraunces italic
+ * carrying display moments, magazine-folio chrome (volume, issue, folio
+ * numbers, register marks). The interrogation is a transcript; the doc list
+ * is a catalog; the system page is a colophon.
  */
 const config: Config = {
   content: [
@@ -17,105 +18,97 @@ const config: Config = {
   theme: {
     extend: {
       colors: {
-        // ── Canvas (deep indigo-charcoal with warmth)
-        canvas: {
-          DEFAULT: "#0a0b10",
-          deep: "#06070a",
-          1: "#0e0f17",
-          2: "#14151f",
-          3: "#1c1d29",
-          4: "#262735",
+        // ── Paper (warm parchment, never pure white)
+        paper: {
+          DEFAULT: "#f4ede0",
+          deep: "#ebe2d0",
+          shade: "#e2d6bd",
+          edge: "#d3c6a8",
         },
-        // ── Glass / overlay
-        glass: {
-          DEFAULT: "rgba(255, 255, 255, 0.04)",
-          stronger: "rgba(255, 255, 255, 0.07)",
-          border: "rgba(255, 255, 255, 0.10)",
-          "border-strong": "rgba(255, 255, 255, 0.16)",
-        },
-        // ── Ink (warm off-white text — never pure white)
+        // ── Ink (warm near-black, espresso)
         ink: {
-          DEFAULT: "#f5f3ec",
-          90: "rgba(245, 243, 236, 0.90)",
-          70: "rgba(245, 243, 236, 0.65)",
-          50: "rgba(245, 243, 236, 0.46)",
-          30: "rgba(245, 243, 236, 0.28)",
-          15: "rgba(245, 243, 236, 0.14)",
+          DEFAULT: "#191713",
+          90: "rgba(25, 23, 19, 0.92)",
+          70: "rgba(25, 23, 19, 0.68)",
+          50: "rgba(25, 23, 19, 0.46)",
+          30: "rgba(25, 23, 19, 0.26)",
+          15: "rgba(25, 23, 19, 0.14)",
+          "08": "rgba(25, 23, 19, 0.08)",
+        },
+        // ── Single saturated accent (Riso warm red / rust)
+        rust: {
+          DEFAULT: "#c84d2c",
+          deep: "#a43d20",
+          soft: "#e89878",
+          glow: "rgba(200, 77, 44, 0.14)",
+          ring: "rgba(200, 77, 44, 0.45)",
+          paper: "#f5d8c8",
         },
-        // ── Single luminous accent (warm amber)
-        amber: {
-          DEFAULT: "#ffb545",
-          soft: "#ffd599",
-          deep: "#d68a1f",
-          glow: "rgba(255, 181, 69, 0.18)",
-          ring: "rgba(255, 181, 69, 0.45)",
+        // ── Cool counterpoint (used sparingly: status-ok, technical chips)
+        slate: {
+          DEFAULT: "#3e5260",
+          soft: "#7a8c98",
+          paper: "#d6dde2",
         },
-        // ── Status (warm-tuned, never primary brand colors)
+        // ── Status (riso-tuned, not generic)
         status: {
-          ok: "#5dd6a8",
-          "ok-glow": "rgba(93, 214, 168, 0.16)",
-          warn: "#ffb545",
-          "warn-glow": "rgba(255, 181, 69, 0.16)",
-          err: "#ff7a7a",
-          "err-glow": "rgba(255, 122, 122, 0.16)",
+          ok: "#496c2a",
+          "ok-glow": "rgba(73, 108, 42, 0.12)",
+          warn: "#c2873a",
+          "warn-glow": "rgba(194, 135, 58, 0.14)",
+          err: "#c84d2c",
+          "err-glow": "rgba(200, 77, 44, 0.14)",
         },
       },
       fontFamily: {
-        // Editorial italic display (Google Font: Instrument Serif)
-        serif: ["var(--font-instrument)", "ui-serif", "Georgia", "serif"],
-        // UI / body (Manrope — modern, geometric, warmer than Inter)
-        sans: ["var(--font-manrope)", "system-ui", "-apple-system", "sans-serif"],
-        // Spec-sheet readouts
+        // Display: Fraunces (variable italic, optical sizes — wonderful)
+        display: ["var(--font-fraunces)", "ui-serif", "Georgia", "serif"],
+        // UI / body: IBM Plex Sans — humanist, characterful, never Inter
+        sans: ["var(--font-plex)", "ui-sans-serif", "system-ui", "sans-serif"],
+        // Folio numerals & technical readouts
         mono: ["var(--font-mono)", "ui-monospace", "SF Mono", "Menlo", "monospace"],
+        // Editorial italic shortcut
+        serif: ["var(--font-fraunces)", "ui-serif", "Georgia", "serif"],
       },
       fontSize: {
-        // Atelier display ladder — generous, with -0.02em tracking
-        "display-2xl": ["88px", { lineHeight: "0.95", letterSpacing: "-0.04em", fontWeight: "500" }],
-        "display-xl": ["64px", { lineHeight: "1.0", letterSpacing: "-0.035em", fontWeight: "500" }],
-        "display-lg": ["44px", { lineHeight: "1.05", letterSpacing: "-0.025em", fontWeight: "600" }],
-        "display-md": ["32px", { lineHeight: "1.12", letterSpacing: "-0.02em", fontWeight: "600" }],
-        "display-sm": ["24px", { lineHeight: "1.2", letterSpacing: "-0.015em", fontWeight: "600" }],
-        // Body
-        lead: ["20px", { lineHeight: "1.5", letterSpacing: "-0.005em", fontWeight: "400" }],
-        body: ["15px", { lineHeight: "1.6", letterSpacing: "0", fontWeight: "400" }],
+        // Folio display ladder — Fraunces with wide tracking range
+        folio: ["120px", { lineHeight: "0.92", letterSpacing: "-0.04em", fontWeight: "300" }],
+        "display-2xl": ["88px", { lineHeight: "0.96", letterSpacing: "-0.035em", fontWeight: "300" }],
+        "display-xl": ["64px", { lineHeight: "1.0", letterSpacing: "-0.03em", fontWeight: "400" }],
+        "display-lg": ["44px", { lineHeight: "1.05", letterSpacing: "-0.02em", fontWeight: "500" }],
+        "display-md": ["32px", { lineHeight: "1.15", letterSpacing: "-0.018em", fontWeight: "500" }],
+        "display-sm": ["22px", { lineHeight: "1.25", letterSpacing: "-0.012em", fontWeight: "500" }],
+        // Body (Plex)
+        lead: ["19px", { lineHeight: "1.55", letterSpacing: "0", fontWeight: "400" }],
+        body: ["15px", { lineHeight: "1.65", letterSpacing: "0", fontWeight: "400" }],
         "body-strong": ["15px", { lineHeight: "1.6", letterSpacing: "0", fontWeight: "600" }],
         caption: ["13px", { lineHeight: "1.5", letterSpacing: "0", fontWeight: "400" }],
         "caption-strong": ["13px", { lineHeight: "1.4", letterSpacing: "0.005em", fontWeight: "600" }],
-        micro: ["11px", { lineHeight: "1.4", letterSpacing: "0.05em", fontWeight: "500" }],
-      },
-      spacing: {
-        section: "96px",
+        // Folio chrome — heavy uppercase tracking
+        folio_chrome: ["10px", { lineHeight: "1.4", letterSpacing: "0.22em", fontWeight: "600" }],
+        micro: ["11px", { lineHeight: "1.4", letterSpacing: "0.16em", fontWeight: "500" }],
       },
       borderRadius: {
         none: "0",
-        xs: "6px",
-        sm: "10px",
-        DEFAULT: "12px",
-        md: "14px",
-        lg: "20px",
-        xl: "28px",
-        "2xl": "36px",
+        xs: "2px",
+        sm: "4px",
+        DEFAULT: "6px",
+        md: "8px",
+        lg: "12px",
         pill: "9999px",
       },
       boxShadow: {
-        // The single sanctioned card glow — for elevated surfaces
-        glass:
-          "0 1px 0 rgba(255,255,255,0.05) inset, 0 0 0 1px rgba(255,255,255,0.08), 0 16px 40px -16px rgba(0,0,0,0.6)",
-        "glass-lg":
-          "0 1px 0 rgba(255,255,255,0.06) inset, 0 0 0 1px rgba(255,255,255,0.10), 0 28px 80px -24px rgba(0,0,0,0.7)",
-        // Amber accent glow for active CTAs
-        amber:
-          "0 0 0 1px rgba(255,181,69,0.42), 0 0 32px -8px rgba(255,181,69,0.45)",
-        // Hairline ring (replaces border-1 for crisp edges on glass)
-        hairline: "0 0 0 1px rgba(255,255,255,0.08)",
-        "hairline-strong": "0 0 0 1px rgba(255,255,255,0.16)",
-      },
-      backdropBlur: {
-        glass: "16px",
-        nav: "24px",
+        // No glassy floats — flat printed surfaces with hairline rules
+        rule: "0 1px 0 rgba(25, 23, 19, 0.14)",
+        "rule-strong": "0 1px 0 rgba(25, 23, 19, 0.26)",
+        "rule-up": "0 -1px 0 rgba(25, 23, 19, 0.14)",
+        // A faint press shadow for cards (almost imperceptible)
+        press: "0 0 0 1px rgba(25,23,19,0.08), 0 1px 0 rgba(25,23,19,0.06)",
+        // Rust ring for accent buttons
+        rust:
+          "0 0 0 1px rgba(200,77,44,0.45), 0 6px 18px -6px rgba(200,77,44,0.35)",
       },
       transitionTimingFunction: {
-        // Smooth deceleration — feels like Apple's spring
         atelier: "cubic-bezier(0.32, 0.72, 0, 1)",
         "out-expo": "cubic-bezier(0.16, 1, 0.3, 1)",
       },
@@ -127,10 +120,10 @@ const config: Config = {
         "stagger-2": "fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both",
         "stagger-3": "fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both",
         "stagger-4": "fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.32s both",
-        shimmer: "shimmer 2.4s ease-in-out infinite",
-        "pulse-soft": "pulseSoft 2.4s ease-in-out infinite",
-        "aurora-1": "aurora1 22s ease-in-out infinite alternate",
-        "aurora-2": "aurora2 28s ease-in-out infinite alternate",
+        rule: "rule 0.5s cubic-bezier(0.16, 1, 0.3, 1) both",
+        "rule-2": "rule 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both",
+        "rule-3": "rule 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both",
+        "ink-pulse": "inkPulse 2.4s ease-in-out infinite",
         "thinking-dot": "thinkingDot 1.4s ease-in-out infinite",
       },
       keyframes: {
@@ -139,28 +132,20 @@ const config: Config = {
           "100%": { opacity: "1" },
         },
         fadeUp: {
-          "0%": { opacity: "0", transform: "translateY(12px)" },
+          "0%": { opacity: "0", transform: "translateY(10px)" },
           "100%": { opacity: "1", transform: "translateY(0)" },
         },
-        shimmer: {
-          "0%, 100%": { opacity: "0.4" },
-          "50%": { opacity: "0.85" },
-        },
-        pulseSoft: {
-          "0%, 100%": { opacity: "0.7", transform: "scale(1)" },
-          "50%": { opacity: "1", transform: "scale(1.04)" },
-        },
-        aurora1: {
-          "0%": { transform: "translate(-10%, -8%) scale(1)" },
-          "100%": { transform: "translate(8%, 10%) scale(1.15)" },
+        rule: {
+          "0%": { transform: "scaleX(0)", transformOrigin: "left" },
+          "100%": { transform: "scaleX(1)", transformOrigin: "left" },
         },
-        aurora2: {
-          "0%": { transform: "translate(8%, 10%) scale(1.1)" },
-          "100%": { transform: "translate(-6%, -4%) scale(1)" },
+        inkPulse: {
+          "0%, 100%": { opacity: "0.65" },
+          "50%": { opacity: "1" },
         },
         thinkingDot: {
-          "0%, 80%, 100%": { opacity: "0.25", transform: "translateY(0)" },
-          "40%": { opacity: "1", transform: "translateY(-3px)" },
+          "0%, 80%, 100%": { opacity: "0.18" },
+          "40%": { opacity: "1" },
         },
       },
     },