From a5b90b690e6d135726413b5785d3786883cd48cd Mon Sep 17 00:00:00 2001
From: Kyle Isom <kyle@imap.cc>
Date: Sat, 28 Mar 2026 12:17:43 -0700
Subject: [PATCH] Switch to Tufte-inspired reading theme

Cream background, serif typography (Georgia/Palatino), italic headings,
small-caps labels, minimal chrome. Reading area at 70% width. Designed
for long-form markdown reading on mobile and desktop.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 web/static/style.css | 365 ++++++++++++++++++++++++-------------------
 1 file changed, 205 insertions(+), 160 deletions(-)

diff --git a/web/static/style.css b/web/static/style.css
index d3581e8..c403621 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -1,77 +1,78 @@
-/* mcq — Nord dark theme, mobile-first reading UI */
+/* mcq — Tufte-inspired reading UI */
 
 /* ===========================
-   Colour tokens (Nord palette)
+   Colour tokens
    =========================== */
 :root {
-  --n0: #2E3440;
-  --n1: #3B4252;
-  --n2: #434C5E;
-  --n3: #4C566A;
-  --s0: #D8DEE9;
-  --s1: #E5E9F0;
-  --s2: #ECEFF4;
-  --f0: #8FBCBB;
-  --f1: #88C0D0;
-  --f2: #81A1C1;
-  --f3: #5E81AC;
-  --red:    #BF616A;
-  --green:  #A3BE8C;
-  --yellow: #EBCB8B;
+  --bg:      #fffff8;
+  --bg-alt:  #f8f4eb;
+  --text:    #111;
+  --text-dim: #666;
+  --text-lt: #999;
+  --accent:  #a00000;
+  --accent-h: #c00000;
+  --border:  #ccc;
+  --border-lt: #e0ddd1;
+  --code-bg: #f0ede4;
+  --green:   #4a7c40;
+  --blue:    #3b5998;
 }
 
 /* ===========================
    Reset
    =========================== */
 *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
-html { font-size: 16px; }
+html { font-size: 16px; -webkit-font-smoothing: antialiased; }
 
 /* ===========================
-   Base
+   Base — Tufte typography
    =========================== */
 body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-  background: var(--n0);
-  color: var(--s0);
+  font-family: Georgia, "Palatino Linotype", Palatino, "Book Antiqua", serif;
+  background: var(--bg);
+  color: var(--text);
   line-height: 1.6;
   min-height: 100vh;
 }
-a { color: var(--f1); text-decoration: none; }
-a:hover { color: var(--f0); text-decoration: underline; }
-p { margin-bottom: 0.875rem; }
-h2 { font-size: 1.375rem; font-weight: 600; color: var(--s2); margin-bottom: 0.25rem; }
+a { color: var(--accent); text-decoration: none; }
+a:hover { color: var(--accent-h); text-decoration: underline; }
+p { margin-bottom: 1rem; }
+h1, h2, h3, h4 {
+  font-weight: 400;
+  font-style: italic;
+  color: var(--text);
+}
+h2 { font-size: 1.625rem; margin-bottom: 0.25rem; }
 code {
-  font-family: "SF Mono", "Cascadia Code", "Fira Code", Consolas, monospace;
+  font-family: Menlo, "DejaVu Sans Mono", Consolas, monospace;
   font-size: 0.8125rem;
-  color: var(--f0);
-  background: var(--n2);
+  color: var(--text);
+  background: var(--code-bg);
   padding: 0.125rem 0.375rem;
-  border-radius: 3px;
+  border-radius: 2px;
 }
 
 /* ===========================
-   Top navigation
+   Top navigation — minimal
    =========================== */
 .topnav {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 1rem;
-  height: 48px;
-  background: var(--n1);
-  border-bottom: 1px solid var(--n3);
-  position: sticky;
-  top: 0;
-  z-index: 100;
+  padding: 0 5%;
+  height: 44px;
+  background: var(--bg);
+  border-bottom: 1px solid var(--border-lt);
 }
 .topnav-brand {
-  font-size: 1rem;
-  font-weight: 700;
-  color: var(--s2);
+  font-size: 0.875rem;
+  font-weight: 400;
+  font-variant: small-caps;
+  letter-spacing: 0.1em;
+  color: var(--text);
   text-decoration: none;
-  letter-spacing: 0.04em;
 }
-.topnav-brand:hover { color: var(--f1); text-decoration: none; }
+.topnav-brand:hover { color: var(--accent); text-decoration: none; }
 .topnav-right {
   display: flex;
   align-items: center;
@@ -79,41 +80,49 @@ code {
 }
 .topnav-user {
   font-size: 0.8125rem;
-  color: var(--s1);
+  color: var(--text-dim);
 }
 
 /* ===========================
    Page containers
    =========================== */
 .page-container {
-  max-width: 720px;
+  width: 70%;
+  max-width: 900px;
   margin: 0 auto;
-  padding: 1.5rem 1rem;
+  padding: 2rem 0;
 }
 .auth-container {
-  max-width: 420px;
-  margin: 5rem auto 2rem;
+  max-width: 380px;
+  margin: 6rem auto 2rem;
   padding: 0 1rem;
 }
 
+@media (max-width: 768px) {
+  .page-container {
+    width: auto;
+    padding: 1.5rem 1rem;
+  }
+}
+
 /* ===========================
    Auth pages
    =========================== */
 .auth-header {
   text-align: center;
-  margin-bottom: 1.75rem;
+  margin-bottom: 2rem;
 }
 .auth-header .brand {
   font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--s2);
-  letter-spacing: 0.04em;
+  font-weight: 400;
+  font-variant: small-caps;
+  letter-spacing: 0.1em;
+  color: var(--text);
 }
 .auth-header .tagline {
-  font-size: 0.6875rem;
-  color: var(--f2);
-  text-transform: uppercase;
-  letter-spacing: 0.12em;
+  font-size: 0.75rem;
+  color: var(--text-lt);
+  font-style: italic;
   margin-top: 0.25rem;
 }
 
@@ -121,23 +130,28 @@ code {
    Cards
    =========================== */
 .card {
-  background: var(--n1);
-  border: 1px solid var(--n3);
-  border-radius: 6px;
-  padding: 1.25rem;
+  background: var(--bg);
+  border: none;
+  border-radius: 0;
+  padding: 0;
   margin-bottom: 1rem;
 }
-.card:last-child { margin-bottom: 0; }
+.auth-container .card {
+  background: var(--bg-alt);
+  border: 1px solid var(--border-lt);
+  border-radius: 4px;
+  padding: 1.5rem;
+}
 
 /* ===========================
    Alerts
    =========================== */
 .error {
-  background: rgba(191, 97, 106, 0.12);
-  color: #e07c82;
-  border: 1px solid rgba(191, 97, 106, 0.3);
-  padding: 0.75rem 1rem;
-  border-radius: 4px;
+  background: #fdf0f0;
+  color: var(--accent);
+  border: 1px solid #e8c4c4;
+  padding: 0.625rem 1rem;
+  border-radius: 3px;
   margin-bottom: 1rem;
   font-size: 0.875rem;
 }
@@ -149,40 +163,39 @@ button, .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 0.375rem;
-  padding: 0.5rem 1.25rem;
-  font-size: 0.875rem;
-  font-weight: 600;
+  padding: 0.375rem 1rem;
+  font-size: 0.8125rem;
+  font-weight: 400;
   font-family: inherit;
-  border: 1px solid var(--f3);
-  border-radius: 4px;
+  border: 1px solid var(--border);
+  border-radius: 3px;
   cursor: pointer;
   text-decoration: none;
   white-space: nowrap;
-  transition: background 0.12s, border-color 0.12s, color 0.12s;
+  transition: background 0.12s, border-color 0.12s;
   line-height: 1.4;
-  background: var(--f3);
-  color: var(--s2);
+  background: var(--bg);
+  color: var(--text);
 }
 button:hover, .btn:hover {
-  background: var(--f2);
-  border-color: var(--f2);
+  background: var(--bg-alt);
+  border-color: var(--text-lt);
   text-decoration: none;
-  color: var(--s2);
+  color: var(--text);
 }
 .btn-ghost {
   background: transparent;
-  color: var(--s0);
-  border-color: var(--n3);
+  color: var(--text-dim);
+  border-color: var(--border-lt);
 }
 .btn-ghost:hover {
-  background: var(--n2);
-  color: var(--s1);
-  border-color: var(--n3);
+  background: var(--bg-alt);
+  color: var(--text);
+  border-color: var(--border);
   text-decoration: none;
 }
 .btn-sm {
-  padding: 0.25rem 0.75rem;
+  padding: 0.1875rem 0.625rem;
   font-size: 0.75rem;
 }
 
@@ -192,106 +205,111 @@ button:hover, .btn:hover {
 .form-group { margin-bottom: 1rem; }
 .form-group label {
   display: block;
-  font-size: 0.6875rem;
-  font-weight: 700;
-  color: var(--s0);
-  margin-bottom: 0.375rem;
-  text-transform: uppercase;
+  font-size: 0.75rem;
+  font-weight: 400;
+  font-variant: small-caps;
   letter-spacing: 0.06em;
+  color: var(--text-dim);
+  margin-bottom: 0.375rem;
 }
 .form-group input {
   width: 100%;
-  padding: 0.5rem 0.75rem;
-  background: var(--n0);
-  border: 1px solid var(--n3);
-  border-radius: 4px;
-  color: var(--s1);
+  padding: 0.5rem 0.625rem;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  color: var(--text);
   font-size: 0.9375rem;
   font-family: inherit;
-  transition: border-color 0.12s, box-shadow 0.12s;
+  transition: border-color 0.12s;
   -webkit-appearance: none;
   appearance: none;
 }
 .form-group input:focus {
   outline: none;
-  border-color: var(--f3);
-  box-shadow: 0 0 0 3px rgba(94, 129, 172, 0.2);
+  border-color: var(--text-dim);
 }
-.form-group input::placeholder { color: var(--n3); }
-.form-actions { margin-top: 0.25rem; }
+.form-group input::placeholder { color: var(--border); }
+.form-actions { margin-top: 0.5rem; }
 
 /* ===========================
    Document list
    =========================== */
 .doc-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  margin-top: 1rem;
+  margin-top: 1.5rem;
+  border-top: 1px solid var(--border-lt);
 }
 .doc-item {
   display: block;
-  background: var(--n1);
-  border: 1px solid var(--n3);
-  border-radius: 6px;
-  padding: 1rem 1.25rem;
+  padding: 0.875rem 0;
   text-decoration: none;
-  transition: border-color 0.12s, background 0.12s;
+  border-bottom: 1px solid var(--border-lt);
+  transition: background 0.1s;
 }
 .doc-item:hover {
-  border-color: var(--f3);
-  background: var(--n2);
+  background: var(--bg-alt);
   text-decoration: none;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  margin-left: -0.5rem;
+  margin-right: -0.5rem;
 }
 .doc-item.doc-read {
-  opacity: 0.6;
+  opacity: 0.5;
 }
 .doc-title {
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--s2);
-  margin-bottom: 0.25rem;
+  font-size: 1.0625rem;
+  font-weight: 400;
+  color: var(--text);
+  margin-bottom: 0.125rem;
 }
 .doc-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 0.75rem;
   font-size: 0.75rem;
-  color: var(--n3);
+  color: var(--text-lt);
+  font-style: italic;
 }
 .doc-badge {
   display: inline-block;
-  padding: 0.0625rem 0.375rem;
-  border-radius: 3px;
+  padding: 0 0.375rem;
+  border-radius: 2px;
   font-size: 0.625rem;
-  font-weight: 700;
-  text-transform: uppercase;
+  font-weight: 400;
+  font-style: normal;
+  font-variant: small-caps;
   letter-spacing: 0.06em;
 }
 .doc-badge.unread {
-  background: rgba(94, 129, 172, 0.2);
-  color: var(--f1);
-  border: 1px solid rgba(94, 129, 172, 0.35);
+  background: transparent;
+  color: var(--accent);
 }
 .doc-badge.read {
-  background: rgba(163, 190, 140, 0.15);
+  background: transparent;
   color: var(--green);
-  border: 1px solid rgba(163, 190, 140, 0.3);
 }
 
 /* ===========================
    Read view
    =========================== */
 .read-header {
-  margin-bottom: 1.25rem;
+  margin-bottom: 1.5rem;
+}
+.read-header h2 {
+  font-size: 2rem;
+  font-style: italic;
+  font-weight: 400;
+  line-height: 1.3;
 }
 .read-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 0.75rem;
-  font-size: 0.75rem;
-  color: var(--n3);
-  margin-top: 0.25rem;
+  font-size: 0.8125rem;
+  color: var(--text-lt);
+  font-style: italic;
+  margin-top: 0.375rem;
   margin-bottom: 0.75rem;
 }
 .read-actions {
@@ -300,69 +318,96 @@ button:hover, .btn:hover {
 }
 
 /* ===========================
-   Markdown body
+   Markdown body — Tufte prose
    =========================== */
 .markdown-body {
-  font-size: 0.9375rem;
-  line-height: 1.7;
+  font-size: 1.0625rem;
+  line-height: 1.8;
+  padding-top: 0.5rem;
+  border-top: 1px solid var(--border-lt);
 }
-.markdown-body h1 { font-size: 1.5rem; font-weight: 700; color: var(--s2); margin: 1.5rem 0 0.75rem; }
-.markdown-body h2 { font-size: 1.25rem; font-weight: 600; color: var(--s2); margin: 1.25rem 0 0.5rem; }
-.markdown-body h3 { font-size: 1.0625rem; font-weight: 600; color: var(--s1); margin: 1rem 0 0.5rem; }
-.markdown-body h4 { font-size: 0.9375rem; font-weight: 600; color: var(--s1); margin: 0.75rem 0 0.375rem; }
-.markdown-body p { margin-bottom: 0.75rem; }
+.markdown-body h1 {
+  font-size: 2rem;
+  font-weight: 400;
+  font-style: italic;
+  margin: 2rem 0 0.75rem;
+}
+.markdown-body h2 {
+  font-size: 1.5rem;
+  font-weight: 400;
+  font-style: italic;
+  margin: 1.75rem 0 0.5rem;
+}
+.markdown-body h3 {
+  font-size: 1.1875rem;
+  font-weight: 400;
+  font-style: italic;
+  margin: 1.5rem 0 0.5rem;
+}
+.markdown-body h4 {
+  font-size: 1.0625rem;
+  font-weight: 400;
+  font-style: italic;
+  margin: 1.25rem 0 0.375rem;
+}
+.markdown-body p { margin-bottom: 1rem; }
 .markdown-body ul, .markdown-body ol {
-  margin-bottom: 0.75rem;
+  margin-bottom: 1rem;
   padding-left: 1.5rem;
 }
-.markdown-body li { margin-bottom: 0.25rem; }
+.markdown-body li {
+  margin-bottom: 0.375rem;
+}
 .markdown-body pre {
-  background: var(--n0);
-  border: 1px solid var(--n3);
-  border-radius: 4px;
-  padding: 0.875rem 1rem;
+  background: var(--code-bg);
+  border: none;
+  border-radius: 0;
+  padding: 1rem 1.25rem;
   overflow-x: auto;
-  margin-bottom: 0.75rem;
+  margin: 1rem 0;
   font-size: 0.8125rem;
-  line-height: 1.5;
+  line-height: 1.6;
 }
 .markdown-body pre code {
   background: none;
   padding: 0;
   font-size: inherit;
-  color: var(--s0);
+  color: var(--text);
 }
 .markdown-body blockquote {
-  border-left: 3px solid var(--f3);
-  padding-left: 1rem;
-  color: var(--s0);
-  margin-bottom: 0.75rem;
+  border-left: none;
+  padding: 0;
+  margin: 1rem 0 1rem 1.5rem;
+  font-style: italic;
+  color: var(--text-dim);
 }
 .markdown-body table {
   width: 100%;
   border-collapse: collapse;
-  margin-bottom: 0.75rem;
+  margin: 1rem 0;
   font-size: 0.875rem;
 }
 .markdown-body th, .markdown-body td {
-  padding: 0.5rem 0.75rem;
-  border: 1px solid var(--n3);
+  padding: 0.375rem 0.75rem;
+  border-bottom: 1px solid var(--border-lt);
   text-align: left;
 }
 .markdown-body th {
-  background: var(--n2);
-  font-weight: 600;
-  color: var(--s2);
+  background: transparent;
+  font-weight: 400;
+  font-variant: small-caps;
+  letter-spacing: 0.04em;
+  border-bottom: 2px solid var(--border);
 }
 .markdown-body hr {
   border: none;
-  border-top: 1px solid var(--n3);
-  margin: 1.25rem 0;
+  border-top: 1px solid var(--border-lt);
+  margin: 2rem 0;
 }
-.markdown-body a { color: var(--f1); }
-.markdown-body a:hover { color: var(--f0); }
+.markdown-body a { color: var(--accent); }
+.markdown-body a:hover { color: var(--accent-h); }
 .markdown-body img {
   max-width: 100%;
   height: auto;
 }
-.markdown-body strong { color: var(--s2); }
+.markdown-body strong { font-weight: 700; }