@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/Fraunces-Variable.woff2") format("woff2"); }

:root { --color-bg: #edf1ee; --color-text: #1d2b33; --color-link: #1769aa; --color-visited: #684878; --color-accent: #e45f3a; --color-secondary: #16877d; --color-highlight: #edc64c; --color-selection-text: #1d2b33; --color-subdued: #46575e; --color-muted: #5f6e73; --color-rule: #b8c7c2; --color-surface: #e3e9e5; --font-body: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-display: "Fraunces", Georgia, serif; --font-ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace; --reading-width: 40rem; --page-gutter: clamp(1.1rem, 5vw, 2.4rem); --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --type-small: .84rem; }

html[data-theme="dark"] { --color-bg: #101c22; --color-text: #dce7e2; --color-link: #67b7e8; --color-visited: #c09acb; --color-accent: #f07452; --color-secondary: #45b7aa; --color-highlight: #d5ad3e; --color-selection-text: #101c22; --color-subdued: #b3c3c2; --color-muted: #879a9b; --color-rule: #344a4e; --color-surface: #17282e; color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body { min-height: 100dvh; }

img, picture, video, svg { display: block; max-width: 100%; }

input, button, textarea, select { font: inherit; }

html { color-scheme: light; color: var(--color-text); background: var(--color-bg); font-family: var(--font-body); font-size: 18px; line-height: 1.62; -webkit-font-smoothing: antialiased; }

body { background: var(--color-bg); }

::selection { color: var(--color-selection-text); background: var(--color-highlight); }

.skip-link { position: fixed; z-index: 100; top: var(--space-2); left: var(--space-2); padding: var(--space-2) var(--space-3); color: var(--color-bg); background: var(--color-text); transform: translateY(-160%); }

.skip-link:focus { transform: translateY(0); }

h1, h2, h3, h4 { color: var(--color-text); font-family: var(--font-display); font-weight: 540; letter-spacing: -.012em; line-height: 1.25; text-wrap: balance; font-variation-settings: "SOFT" 20, "WONK" 0; }

h1 { font-size: clamp(1.65rem, 4vw, 1.95rem); }

h2 { margin: var(--space-10) 0 var(--space-3); font-size: 1.16rem; }

h3 { margin: var(--space-8) 0 var(--space-2); font-size: 1rem; }

h4 { margin: var(--space-6) 0 var(--space-2); font-size: .92rem; }

p { margin-bottom: var(--space-5); text-wrap: pretty; }

p:last-child { margin-bottom: 0; }

ul, ol { margin: var(--space-2) 0 var(--space-5); padding-left: var(--space-6); }

li { margin-bottom: var(--space-2); }

strong, b { font-weight: 600; }

a { color: var(--color-link); text-decoration-color: color-mix(in srgb, var(--color-link) 48%, transparent); text-decoration-thickness: 1px; text-underline-offset: .15em; }

a:visited { color: var(--color-visited); }

a:hover { color: var(--color-text); text-decoration-color: var(--color-text); }

a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

blockquote { margin: var(--space-8) 0; padding-left: var(--space-5); color: var(--color-subdued); border-left: 1px solid var(--color-rule); font-style: italic; }

code { padding: .08em .3em; background: var(--color-surface); border: 1px solid var(--color-rule); font-size: var(--type-small); }

pre { margin: var(--space-8) 0; padding: var(--space-6); overflow-x: auto; background: var(--color-surface); border: 1px solid var(--color-rule); }

pre code { padding: 0; background: none; border: 0; }

.reading-column { width: 100%; max-width: calc(var(--reading-width) + 2 * var(--page-gutter)); margin-inline: auto; padding-inline: var(--page-gutter); }

.header-inner { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6); width: 100%; max-width: calc(var(--reading-width) + 2 * var(--page-gutter)); margin-inline: auto; padding: 1.15rem var(--page-gutter) 1rem; }

.site-name-link { flex: 0 0 auto; color: var(--color-text); text-decoration: none; }

.site-name-link:visited { color: var(--color-text); }

.site-name-link:hover { color: var(--color-link); }

.site-name { font-family: var(--font-display); font-size: .94rem; font-weight: 560; letter-spacing: -.01em; }

.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4); }

.site-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem 1rem; }

.nav-link { color: var(--color-subdued); font-family: var(--font-ui); font-size: var(--type-small); line-height: 1.35; text-decoration: none; }

.nav-link:visited { color: var(--color-subdued); }

.nav-link:hover, .nav-link.active { color: var(--color-link); }

.nav-link.active { text-decoration: underline; text-underline-offset: .2em; }

.theme-toggle { display: grid; flex: 0 0 auto; width: 1.55rem; height: 1.55rem; padding: 0; place-items: center; color: var(--color-subdued); background: transparent; border: 1px solid var(--color-rule); border-radius: 50%; cursor: pointer; font-family: var(--font-ui); font-size: .82rem; line-height: 1; }

.theme-toggle:hover { color: var(--color-link); border-color: var(--color-link); }

.theme-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.page-header { margin: var(--space-10) 0 var(--space-8); }

.page-content { margin-bottom: var(--space-12); }

.page-content > :first-child { margin-top: 0; }

.home-inner { padding-top: var(--space-10); padding-bottom: 0; }

.home-inner > .home-section:first-child { margin-top: 0; }

.home-inner > .home-section:first-child h1 { margin: 0 0 var(--space-4); font-size: 1.16rem; }

.home-inner > .home-section:first-child h1::before { display: inline-block; width: .38rem; height: .38rem; margin-right: .55rem; background: var(--color-accent); border-radius: 50%; content: ""; transform: translateY(-0.08rem); }

.home-section { margin-top: var(--space-10); }

.home-section h2 { margin-top: 0; }

.section-note { margin: calc(-1 * var(--space-1)) 0 var(--space-4); color: var(--color-subdued); font-size: .92rem; }

.home-section h2::before { display: inline-block; width: .38rem; height: .38rem; margin-right: .55rem; background: var(--color-accent); border-radius: 50%; content: ""; transform: translateY(-0.08rem); }

.home-notes { margin-top: var(--space-6); color: var(--color-subdued); font-size: .92rem; }

.home-notes p { margin-bottom: var(--space-3); }

.dated-list, .selected-work, .linklog-list { margin: var(--space-4) 0 0; padding: 0; list-style: none; }

.dated-list li, .selected-work li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: var(--space-4); margin-bottom: var(--space-5); }

.dated-list time, .selected-work time { padding-top: .1em; color: var(--color-muted); font-family: var(--font-mono); font-size: var(--type-small); font-variant-numeric: tabular-nums; }

.dated-list a, .selected-work a { font-weight: 500; }

.dated-list p, .selected-work p { margin-top: .1rem; color: var(--color-subdued); font-size: .92rem; line-height: 1.52; }

.selected-work li:not(:has(time)) { grid-template-columns: 3.4rem minmax(0, 1fr); }

.selected-work li:not(:has(time))::before { content: ""; }

.dated-list--archive { margin-top: var(--space-8); }

.linklog-list > li { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr); gap: var(--space-4); margin-bottom: var(--space-8); }

.linklog-list--home > li { display: block; margin-bottom: var(--space-5); }

.linklog-list time, .linklog-date { padding-top: .1em; color: var(--color-muted); font-family: var(--font-mono); font-size: .72rem; font-variant-numeric: tabular-nums; line-height: 1.45; }

.linklog-list h2 { margin: 0 0 var(--space-1); font-size: 1rem; }

.linklog-list p { margin-bottom: var(--space-2); }

.linklog-list--home p { margin-top: .1rem; color: var(--color-subdued); font-size: .92rem; line-height: 1.52; }

.linklog-list--home .article-meta { margin: 0.15rem 0 var(--space-1); font-size: .78rem; }

.more-link, .home-notes, .site-footer, .article-meta { font-family: var(--font-ui); }

.more-link { margin-top: var(--space-3); font-size: var(--type-small); }

.archive-section { margin-top: var(--space-6); }

.archive-section summary { position: relative; padding-left: 1.65rem; color: var(--color-text); cursor: pointer; font-family: var(--font-ui); font-size: .94rem; font-weight: 600; list-style: none; }

.archive-section summary::-webkit-details-marker { display: none; }

.archive-section summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.archive-section summary::before { position: absolute; top: .22em; left: 0; color: var(--color-secondary); content: "[+]"; font-family: var(--font-mono); font-size: .72em; font-weight: 600; letter-spacing: -.08em; }

.archive-section[open] > summary::before { content: "[-]"; }

.writing-record { margin-top: var(--space-8); margin-bottom: var(--space-8); }

.archive-section-content { margin: var(--space-5) 0 var(--space-8); padding-left: 1.15rem; }

.archive-section-content h2 { margin: var(--space-6) 0 var(--space-3); font-size: 1rem; }

.archive-section-content h2:first-child { margin-top: 0; }

.archive-list { margin-bottom: var(--space-5); }

.archive-list li { margin-bottom: var(--space-3); }

.archive-list--compact { columns: 2; column-gap: var(--space-8); }

.work-index { margin-top: 0; padding: 0; list-style: none; }

.work-index li { margin-bottom: var(--space-6); }

.work-index a, .work-index-title { font-weight: 600; }

.work-index p { margin: .1rem 0 0; color: var(--color-subdued); font-size: .94rem; line-height: 1.52; }

.external-arrow { display: inline-block; margin-left: .06em; font-size: .7em; line-height: 1; transform: translateY(-0.2em); }

.site-footer { margin-top: var(--space-8); padding-bottom: var(--space-8); color: var(--color-muted); font-size: var(--type-small); }

.site-footer .reading-column { padding-top: var(--space-4); }

.footer-credit { margin-top: var(--space-2); }

.article-entry { margin-bottom: var(--space-8); }

.article-entry h2, .article-entry h3 { margin: 0 0 var(--space-2); }

.article-entry p, .article-entry blockquote { margin-bottom: var(--space-2); }

.article-entry blockquote { margin-top: var(--space-4); padding-left: var(--space-4); font-size: var(--type-small); }

.article-meta { color: var(--color-muted); font-size: var(--type-small); }

.page-figure { margin: 0 0 var(--space-8); border: 1px solid var(--color-rule); background: var(--color-surface); }

.page-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 58%; filter: saturate(0.72) contrast(1.03); }

.page-figure figcaption { padding: var(--space-2) var(--space-3); color: var(--color-muted); font-size: var(--type-small); line-height: 1.4; }

.bibliography-entry { margin-bottom: var(--space-5); }

.bibliography-citation { padding-left: 1.2rem; line-height: 1.55; text-indent: -1.2rem; }

@media (max-width: 600px) { html { font-size: 17px; } .header-inner { display: block; } .header-actions { justify-content: space-between; margin-top: var(--space-2); } .site-nav { justify-content: flex-start; gap: .3rem .9rem; } .home-inner { padding-top: var(--space-8); } .page-header { margin-top: var(--space-8); margin-bottom: var(--space-6); } .dated-list li, .selected-work li { grid-template-columns: 2.8rem minmax(0, 1fr); gap: var(--space-3); } .selected-work li:not(:has(time)) { grid-template-columns: 2.8rem minmax(0, 1fr); } .linklog-list > li, .linklog-list--home > li { display: block; margin-bottom: var(--space-8); } .linklog-list time, .linklog-date { display: block; margin-bottom: var(--space-1); } .archive-list--compact { columns: 1; } }

@media (max-width: 390px) { :root { --page-gutter: 1rem; } .site-nav { column-gap: .75rem; } .nav-link { font-size: .8rem; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

@media print { *, *::before, *::after { background: transparent !important; color: #000 !important; } html { font-size: 11pt; line-height: 1.5; } body { min-height: auto; border-top: 0; } .site-header, .site-footer, nav { display: none !important; } .reading-column { max-width: none; padding: 0; margin: 0; } h1 { font-size: 20pt; } h2 { font-size: 15pt; } p { orphans: 3; widows: 3; } a { text-decoration: none; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555 !important; } @page { margin: 2cm; } }