/* ============================================================ TAKE BACK YOUR DATA — Main Stylesheet Palette rationale: Light mode: pale desert sand + olive green accent - Background (#F3EDDB): bleached sand, sun-warmed stone - Accent (#6B7C3F): olive — earthy, grounded, political without urgency - Text (#1E2810): deep forest-brown, reads warm not cold Dark mode: deep olive forest + sandy gold accent (modes mirror each other) - Background (#1C2210): forest floor, night earth - Accent (#C8B47A): warm desert gold — the light mode's landscape - Text (#F0E9D2): pale sand, like light through linen ============================================================ */ /* ============================================================ Google Fonts loaded via : Lora (serif) + Inter (sans) ============================================================ */ /* ============================================================ CSS CUSTOM PROPERTIES ============================================================ */ :root { --bg: #F3EDDB; --bg-alt: #E8DFCA; --bg-card: #F8F4E8; --text: #1E2810; --text-muted: #5A6835; --text-light: #96906A; --accent: #6B7C3F; --accent-hover: #4F5C2D; --accent-pale: #EDF2DC; --border: #CEC49A; --border-mid: #B5A87E; --nav-bg: #1E2810; --nav-text: #F3EDDB; --nav-muted: #96906A; --shadow-sm: 0 1px 3px rgba(30,40,16,0.08); --shadow: 0 4px 16px rgba(30,40,16,0.12); --font-serif: 'Lora', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --content-w: 680px; --wide-w: 1080px; --nav-h: 58px; } /* Dark mode — respects system AND manual toggle */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #1C2210; --bg-alt: #253019; --bg-card: #253019; --text: #F0E9D2; --text-muted: #BFB47A; --text-light: #7A8850; --accent: #C8B47A; --accent-hover: #D4C490; --accent-pale: #2A3518; --border: #3A4820; --border-mid: #4F6030; --nav-bg: #141B0C; --nav-text: #F0E9D2; --nav-muted: #7A8850; --shadow-sm: 0 1px 3px rgba(0,0,0,0.35); --shadow: 0 4px 16px rgba(0,0,0,0.45); } } [data-theme="dark"] { --bg: #1C2210; --bg-alt: #253019; --bg-card: #253019; --text: #F0E9D2; --text-muted: #BFB47A; --text-light: #7A8850; --accent: #C8B47A; --accent-hover: #D4C490; --accent-pale: #2A3518; --border: #3A4820; --border-mid: #4F6030; --nav-bg: #141B0C; --nav-text: #F0E9D2; --nav-muted: #7A8850; --shadow-sm: 0 1px 3px rgba(0,0,0,0.35); --shadow: 0 4px 16px rgba(0,0,0,0.45); } [data-theme="light"] { --bg: #F3EDDB; --bg-alt: #E8DFCA; --bg-card: #F8F4E8; --text: #1E2810; --text-muted: #5A6835; --text-light: #96906A; --accent: #6B7C3F; --accent-hover: #4F5C2D; --accent-pale: #EDF2DC; --border: #CEC49A; --border-mid: #B5A87E; } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 18px; } body { font-family: var(--font-serif); line-height: 1.75; color: var(--text); background: var(--bg); transition: background-color 0.2s ease, color 0.2s ease; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } /* ============================================================ READING PROGRESS BAR ============================================================ */ #progress-bar { position: fixed; top: 0; left: 0; width: 0%; height: 2px; background: var(--accent); z-index: 200; transition: width 0.08s linear; pointer-events: none; } /* ============================================================ NAVIGATION ============================================================ */ .site-nav { position: sticky; top: 0; z-index: 100; background: var(--nav-bg); height: var(--nav-h); display: flex; align-items: center; } .nav-inner { width: 100%; max-width: var(--wide-w); margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .nav-logo { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--nav-text); text-decoration: none; white-space: nowrap; flex-shrink: 0; } .nav-logo span { color: var(--accent); } .nav-links { display: flex; align-items: center; gap: 1.75rem; list-style: none; } .nav-links a { font-family: var(--font-sans); font-size: 0.82rem; font-weight: 500; color: var(--nav-muted); text-decoration: none; letter-spacing: 0.02em; transition: color 0.15s; } .nav-links a:hover, .nav-links a.active { color: var(--nav-text); } .nav-substack { color: var(--accent) !important; font-size: 0.78rem !important; } .nav-substack:hover { color: #C4A882 !important; } .theme-toggle { appearance: none; background: none; border: 1px solid #3A4820; border-radius: 4px; color: var(--nav-muted); cursor: pointer; font-size: 0.95rem; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; transition: color 0.15s, border-color 0.15s; line-height: 1; } .theme-toggle:hover { color: var(--nav-text); border-color: #7A8850; } /* ============================================================ SHARED LAYOUT HELPERS ============================================================ */ .page-container { max-width: var(--wide-w); margin: 0 auto; padding: 0 2rem; } .section-label { font-family: var(--font-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-light); margin-bottom: 2rem; } /* ============================================================ HOME PAGE — HERO ============================================================ */ .hero { padding: 6rem 0 5rem; border-bottom: 1px solid var(--border); } .hero-eyebrow { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.5rem; } .hero-title { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 700; line-height: 1.18; letter-spacing: -0.025em; color: var(--text); margin-bottom: 1.5rem; max-width: 20ch; } .hero-subtitle { font-family: var(--font-sans); font-size: 1.05rem; line-height: 1.7; color: var(--text-muted); max-width: 52ch; margin-bottom: 2.5rem; } .hero-cta { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 600; color: var(--accent); text-decoration: none; padding-bottom: 2px; border-bottom: 1.5px solid var(--accent); transition: color 0.15s, border-color 0.15s; } .hero-cta:hover { color: var(--accent-hover); border-color: var(--accent-hover); } /* ============================================================ ESSAY CARD LIST (used on home + essays page) ============================================================ */ .essays-section { padding: 3.5rem 0; } .essay-list { display: flex; flex-direction: column; } .essay-card { padding: 2rem 0; border-bottom: 1px solid var(--border); } .essay-card:first-of-type { border-top: 1px solid var(--border); } .essay-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; font-family: var(--font-sans); font-size: 0.78rem; color: var(--text-light); margin-bottom: 0.6rem; } .essay-reading-time::before { content: "·"; margin-right: 0.75rem; } .essay-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-left: auto; } .tag { font-family: var(--font-sans); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.04em; padding: 0.2em 0.6em; border-radius: 3px; background: var(--bg-alt); color: var(--text-muted); cursor: pointer; border: 1px solid var(--border); text-decoration: none; transition: background 0.15s, color 0.15s, border-color 0.15s; } .tag:hover, .tag.active { background: var(--accent-pale); color: var(--accent); border-color: transparent; } .essay-card-title { font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: var(--text); margin-bottom: 0.4rem; } .essay-card-title a { color: inherit; text-decoration: none; transition: color 0.15s; } .essay-card-title a:hover { color: var(--accent); } .essay-card-subtitle { font-size: 0.95rem; color: var(--text-muted); line-height: 1.6; font-style: italic; } /* ============================================================ ESSAYS LISTING PAGE ============================================================ */ .essays-page-header { padding: 5rem 0 3rem; border-bottom: 1px solid var(--border); } .essays-page-header h1 { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 0.75rem; } .essays-page-header p { font-family: var(--font-sans); font-size: 1rem; color: var(--text-muted); max-width: 48ch; } .search-wrapper { padding: 1.5rem 0 0.5rem; } .search-input { font-family: var(--font-sans); font-size: 0.9rem; padding: 0.6rem 1rem; border: 1px solid var(--border-mid); border-radius: 5px; background: var(--bg); color: var(--text); width: 100%; max-width: 380px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(107, 124, 63, 0.18); } .search-input::placeholder { color: var(--text-light); } .tag-filter { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 1.25rem 0; border-bottom: 1px solid var(--border); } .tag-filter-label { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-light); margin-right: 0.25rem; } /* ============================================================ ESSAY READING PAGE LAYOUT ============================================================ */ .essay-layout { display: grid; grid-template-columns: 1fr; max-width: var(--wide-w); margin: 0 auto; padding: 4rem 2rem; gap: 4rem; align-items: start; } @media (min-width: 1040px) { .essay-layout { grid-template-columns: 1fr 200px; } } /* Essay header */ .essay-header { margin-bottom: 3rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--border); } .essay-header-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.6rem; font-family: var(--font-sans); font-size: 0.78rem; color: var(--text-light); margin-bottom: 1.25rem; } .reading-time-value { color: var(--text-light); } .essay-header-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; } .essay-header h1 { font-size: clamp(1.75rem, 4vw, 2.6rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.025em; color: var(--text); margin-bottom: 0.75rem; } .essay-header-subtitle { font-size: 1.1rem; color: var(--text-muted); font-style: italic; line-height: 1.6; } /* Essay body text */ .essay-body { max-width: var(--content-w); } .essay-body p { margin-bottom: 1.5rem; } /* Drop cap / lede — first paragraph */ .essay-body > p:first-child { font-size: 1.05rem; color: var(--text); } .essay-body h2 { font-size: 1.3rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; color: var(--text); margin-top: 3rem; margin-bottom: 1rem; } .essay-body h3 { font-size: 1.05rem; font-weight: 700; color: var(--text); margin-top: 2rem; margin-bottom: 0.75rem; } .essay-body ul, .essay-body ol { margin-bottom: 1.5rem; padding-left: 1.6rem; } .essay-body li { margin-bottom: 0.5rem; } .essay-body li > strong:first-child { color: var(--text); } .essay-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(107, 124, 63, 0.35); transition: text-decoration-color 0.15s; } .essay-body a:hover { text-decoration-color: var(--accent); } /* Pull quotes / blockquotes */ .essay-body blockquote { border-left: 3px solid var(--accent); margin: 2.5rem 0; padding: 0.25rem 0 0.25rem 1.75rem; color: var(--text-muted); font-size: 1.1rem; font-style: italic; line-height: 1.7; } /* Inline note style */ .essay-body .note { font-family: var(--font-sans); font-size: 0.875rem; color: var(--text-muted); background: var(--bg-alt); border-radius: 4px; padding: 0.75rem 1rem; margin: 2rem 0; font-style: italic; } /* References / footnotes section */ .references { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--border); } .references h2 { font-family: var(--font-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-light); margin-bottom: 1.25rem; } .references ol, .references ul { font-family: var(--font-sans); font-size: 0.82rem; color: var(--text-muted); line-height: 1.65; padding-left: 1.5rem; } .references li { margin-bottom: 0.5rem; } /* Essay footer: share + nav */ .essay-footer { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--border); } .share-btn { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-sans); font-size: 0.85rem; font-weight: 500; padding: 0.5rem 1.1rem; border: 1px solid var(--border-mid); border-radius: 5px; background: transparent; color: var(--text-muted); cursor: pointer; transition: border-color 0.15s, color 0.15s; } .share-btn:hover { border-color: var(--accent); color: var(--accent); } .essay-nav { display: flex; justify-content: space-between; gap: 2rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); } .essay-nav-item { flex: 1; } .essay-nav-next { text-align: right; } .essay-nav-item .label { display: block; font-family: var(--font-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-light); margin-bottom: 0.35rem; } .essay-nav-item a { font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; color: var(--text); text-decoration: none; transition: color 0.15s; line-height: 1.4; } .essay-nav-item a:hover { color: var(--accent); } /* ============================================================ TABLE OF CONTENTS SIDEBAR ============================================================ */ .toc-sidebar { display: none; } @media (min-width: 1040px) { .toc-sidebar { display: block; position: sticky; top: calc(var(--nav-h) + 2.5rem); padding-left: 2rem; border-left: 1px solid var(--border); max-height: calc(100vh - var(--nav-h) - 5rem); overflow-y: auto; } } .toc-label { font-family: var(--font-sans); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-light); margin-bottom: 0.9rem; } .toc-list { list-style: none; padding: 0; } .toc-list li { margin-bottom: 0.2rem; } .toc-list .toc-h3 { padding-left: 0.85rem; } .toc-list a { display: block; font-family: var(--font-sans); font-size: 0.78rem; color: var(--text-muted); text-decoration: none; line-height: 1.45; padding: 0.18rem 0 0.18rem 0.75rem; margin-left: -0.75rem; border-left: 2px solid transparent; transition: color 0.15s, border-color 0.15s; } .toc-list a:hover { color: var(--text); } .toc-list a.toc-active { color: var(--accent); border-left-color: var(--accent); } /* ============================================================ ABOUT PAGE ============================================================ */ .about-page { max-width: var(--content-w); margin: 0 auto; padding: 5rem 2rem 6rem; } .about-page h1 { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 2.5rem; } .about-page h2 { font-size: 1.2rem; font-weight: 700; margin-top: 2.5rem; margin-bottom: 0.9rem; } .about-page p { font-size: 1rem; line-height: 1.8; color: var(--text-muted); margin-bottom: 1.4rem; } .about-page a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: var(--nav-bg); color: var(--nav-muted); margin-top: 4rem; } .footer-inner { max-width: var(--wide-w); margin: 0 auto; padding: 3rem 2rem; } .footer-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid #253019; margin-bottom: 1.5rem; } .footer-brand { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--nav-text); margin-bottom: 0.5rem; } .footer-brand span { color: var(--accent); } .footer-tagline { font-family: var(--font-sans); font-size: 0.8rem; color: #7A8850; max-width: 32ch; line-height: 1.55; } .footer-links { display: flex; gap: 1.5rem; list-style: none; padding-top: 0.1rem; } .footer-links a { font-family: var(--font-sans); font-size: 0.8rem; color: var(--nav-muted); text-decoration: none; transition: color 0.15s; } .footer-links a:hover { color: var(--nav-text); } .footer-bottom { font-family: var(--font-sans); font-size: 0.75rem; color: #4F6030; } .footer-bottom a { color: #7A8850; } .footer-bottom a:hover { color: var(--nav-muted); } /* ============================================================ NO-RESULTS MESSAGE ============================================================ */ .no-results { font-family: var(--font-sans); font-size: 0.9rem; color: var(--text-light); padding: 2.5rem 0; display: none; } /* ============================================================ PRINT STYLES ============================================================ */ @media print { .site-nav, .toc-sidebar, .essay-footer, .essay-nav, .site-footer, #progress-bar { display: none !important; } body { font-size: 11pt; background: white; color: black; } .essay-layout { display: block; padding: 0; max-width: 100%; } .essay-body { max-width: 100%; } .essay-body a::after { content: " (" attr(href) ")"; font-size: 0.75em; color: #555; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 640px) { html { font-size: 17px; } .nav-inner { padding: 0 1.25rem; } .nav-links { gap: 1.25rem; } .page-container { padding: 0 1.25rem; } .hero { padding: 3.5rem 0 3rem; } .hero-title { font-size: 1.9rem; } .essay-layout { padding: 2.5rem 1.25rem; gap: 2rem; } .essay-nav { flex-direction: column; gap: 1.5rem; } .essay-nav-next { text-align: left; } .footer-top { flex-direction: column; gap: 1.5rem; } .essays-section { padding: 2.5rem 0; } }