:root { --paper: #f5f1e8; --paper-soft: #efeadd; --ink: #2b2926; --ink-soft: #5c5750; --ink-faint: #8a847a; --rule: #e0d9c9; --accent: #6a5a48; --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --reading: 740px; --container: 1080px; } /* Dark theme — warm dark charcoal palette, applied via data-theme on . */ [data-theme="dark"] { --paper: #1d1b17; --paper-soft: #25221c; --ink: #e7e0d1; --ink-soft: #b1a999; --ink-faint: #8a8173; --rule: #38342c; --accent: #c2a878; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; color: var(--ink); font-family: var(--serif); font-size: 19px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Warm paper: soft radial wash over a faint grain texture. */ background-color: #f1ece0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E"), radial-gradient(130% 90% at 50% -12%, #f7f3ea 0%, #f3eee2 46%, #ece5d4 100%); background-repeat: repeat, no-repeat; background-size: 200px 200px, 100% 100%; background-attachment: fixed; } /* Dark mode background — warm near-black with the same faint grain. */ [data-theme="dark"] body { background-color: #1a1814; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"), radial-gradient(130% 90% at 50% -12%, #25221b 0%, #1e1c16 46%, #16140f 100%); background-repeat: repeat, no-repeat; background-size: 200px 200px, 100% 100%; background-attachment: fixed; } /* Centered layout columns — balanced whitespace at every width. */ .container { max-width: var(--container); margin: 0 auto; padding: 0 2rem; } .reading { max-width: var(--reading); margin: 0 auto; padding: 3rem 1.5rem 4rem; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } /* Masthead — wide banner framing the page. */ .masthead { padding: 3.25rem 0 2.5rem; border-bottom: 1px solid var(--rule); } .nav { display: flex; align-items: baseline; justify-content: space-between; } .site-title { font-family: var(--sans); font-size: 1.05rem; font-weight: 600; letter-spacing: 0.08em; color: var(--ink); } .site-title:hover { text-decoration: none; } .nav-about { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ink-faint); } /* Right side of the masthead nav: About link + theme toggle. */ .nav-right { display: flex; align-items: center; gap: 1.25rem; } .theme-toggle { display: inline-flex; align-items: center; padding: 0; border: 0; background: transparent; color: var(--ink-faint); cursor: pointer; line-height: 0; } .theme-toggle:hover { color: var(--accent); } /* Show a moon in light mode (click → dark), a sun in dark mode (click → light). */ .icon { display: none; } .icon-moon { display: inline-block; } .icon-sun { display: none; } [data-theme="dark"] .icon-moon { display: none; } [data-theme="dark"] .icon-sun { display: inline-block; } .tagline { margin: 0.6rem 0 0; font-style: italic; font-size: 1rem; color: var(--ink-soft); } /* Main reading column. */ main { min-height: 52vh; } /* Home list */ .list { list-style: none; margin: 0; padding: 0; } .entry { padding: 0; } .entry:not(:first-child) { margin-top: 2.4rem; } /* Small centered accent diamond between entries. */ .entry:not(:last-child)::after { content: ""; display: block; width: 6px; height: 6px; background: var(--accent); transform: rotate(45deg); margin: 2.4rem auto 0; opacity: 0.5; } .entry-title { margin: 0 0 0.45rem; font-size: 1.5rem; line-height: 1.3; font-weight: 600; } /* Animated underline on hover, in the muted accent. */ .entry-title a { color: var(--ink); background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 2px; transition: background-size 0.32s ease, color 0.32s ease; } .entry-title a:hover { color: var(--accent); background-size: 100% 1.5px; text-decoration: none; } .entry-dek { margin: 0 0 0.8rem; font-style: italic; color: var(--ink-soft); font-size: 1.06rem; line-height: 1.5; } .entry-date { margin: 0; font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.09em; color: var(--ink-faint); display: flex; align-items: center; } /* Small accent tick before each date. */ .entry-date::before { content: ""; display: inline-block; width: 2px; height: 0.8em; background: var(--accent); margin-right: 0.6rem; opacity: 0.7; } /* Article */ .article { margin-top: 0.5rem; } .article-title { margin: 0 0 0.75rem; font-size: 2.1rem; line-height: 1.18; font-weight: 600; letter-spacing: -0.005em; } .article-meta { margin: 0 0 0.4rem; font-family: var(--sans); font-size: 0.76rem; letter-spacing: 0.09em; color: var(--ink-faint); } .article-dek { margin: 0 0 2.2rem; font-style: italic; font-size: 1.18rem; line-height: 1.5; color: var(--ink-soft); } /* Ornamental divider: flanking hairlines + accent diamond. */ .ornament { display: flex; align-items: center; justify-content: center; gap: 0.85rem; margin: 0 0 2.4rem; } .ornament::before, .ornament::after { content: ""; width: 2.6rem; border-top: 1px solid var(--rule); } .ornament-dot { width: 6px; height: 6px; background: var(--accent); transform: rotate(45deg); opacity: 0.85; } .article-body p { margin: 0 0 1.4em; font-size: 1.06rem; line-height: 1.72; hanging-punctuation: first; } .article-body p:last-child { margin-bottom: 0; } /* Drop cap on the opening paragraph of each essay. */ .article-body > p:first-child::first-letter { font-family: var(--serif); font-size: 3.5rem; line-height: 0.82; float: left; margin: 0.32rem 0.6rem 0 0; color: var(--accent); font-weight: 600; } .back-link { display: inline-block; margin-top: 3rem; font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--ink-faint); } .note { color: var(--ink-faint); font-style: italic; } /* About / not-found */ .standfirst { font-size: 1.12rem; line-height: 1.6; color: var(--ink-soft); max-width: 34rem; } /* Footer — mirrors the masthead band. */ .footer { border-top: 1px solid var(--rule); padding: 2.5rem 0 3.5rem; } .footer-label { margin: 0 0 0.5rem; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--ink-faint); } .footer-blurb { margin: 0 0 1.2rem; font-style: italic; font-size: 1.02rem; line-height: 1.55; color: var(--ink-soft); max-width: 32rem; } .footer-colophon { margin: 0; font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.08em; color: var(--ink-faint); } @media (max-width: 560px) { body { font-size: 18px; } .container, .reading { padding-left: 1.25rem; padding-right: 1.25rem; } .article-title { font-size: 1.75rem; } .entry-title { font-size: 1.32rem; } .masthead { padding: 2.5rem 0 2rem; } .nav-right { gap: 1rem; } .article-body > p:first-child::first-letter { font-size: 2.9rem; } } /* Smooth theme transition — gated behind .transitions (added after first paint via the inline head script) so the initial render never flashes/animates. */ .transitions * { transition: background-color 0.32s ease, color 0.32s ease, border-color 0.32s ease; } .transitions .article-body > p:first-child::first-letter, .transitions .ornament::before, .transitions .ornament::after { transition: color 0.32s ease, border-color 0.32s ease; } ::selection { background: #d9d0bb; color: var(--ink); } [data-theme="dark"] ::selection { background: #4a4338; color: #f5f1e8; }