/* ============================================================ Theme tokens — a bookbinding palette: warm parchment, walnut ink, a single cognac-leather accent, a muted gold-olive second. Tailwind's color names (bg, ink, accent, …) point at these, so flipping the `dark` class on reskins the whole site. ============================================================ */ :root { --c-bg: #f6efe1; --c-surface: #ece0c8; --c-text: #2a2116; --c-text-muted: #6d5f47; --c-border: #ddccA6; --c-accent: #a1571f; --c-accent-2: #8a7530; } .dark { --c-bg: #1c150d; --c-surface: #251c11; --c-text: #ece2cc; --c-text-muted: #a89878; --c-border: #3c2f1c; --c-accent: #d98a4a; --c-accent-2: #c2a542; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--c-bg); color: var(--c-text); transition: background-color .3s ease, color .3s ease; } /* Very faint laid-paper grain, everywhere */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: 0.045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } ::selection { background: var(--c-accent); color: var(--c-bg); } /* Make Tailwind Typography (prose) follow the theme accent for links and honour the body color/font. dark:prose-invert handles the rest. */ .prose { --tw-prose-body: var(--c-text); --tw-prose-headings: var(--c-text); --tw-prose-links: var(--c-accent); --tw-prose-invert-links: var(--c-accent); --tw-prose-bold: var(--c-text); --tw-prose-quotes: var(--c-text); --tw-prose-quote-borders: var(--c-accent); } .prose a { text-underline-offset: 2px; } .prose :where(h1, h2, h3) { font-family: "Cormorant", Georgia, serif; } .prose blockquote { font-style: italic; } /* Quoted essay passages already carry their own curly quotes (via kramdown smartquotes) — suppress Typography's auto open/close-quote so they don't double up. */ .prose blockquote p:first-of-type::before, .prose blockquote p:last-of-type::after { content: none; } /* ---------- citation labels (Book/Chapter refs) ---------- */ .cite { font-family: "Archivo", ui-sans-serif, sans-serif; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-text-muted); } /* ---------- essay / quote cards ---------- */ .essay-card { border: 1px solid var(--c-border); background: var(--c-surface); border-radius: 2px; overflow: hidden; } .essay-card--featured { border-color: var(--c-accent); border-width: 2px; } .quote-mark { font-family: "Cormorant", Georgia, serif; color: var(--c-accent-2); opacity: 0.6; } /* A small rule with the balance-emblem centered, for section dividers */ .divider-emblem { display: flex; align-items: center; gap: 1rem; color: var(--c-border); } .divider-emblem::before, .divider-emblem::after { content: ""; flex: 1; border-top: 1px solid var(--c-border); }