:root { --paper:#fafbf9; --paper-dim:#f1f3ef; --ink:#151a16; --ink-dim:#3a413b; --rule:#dde1da; --accent:#2f5d3a; --signal:#a9c4ad; --band:#17211a; --accent-light:#a9c4ad; --sans:-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif; --mono:"DM Mono","SF Mono",ui-monospace,monospace; --text-xs:13px; --text-sm:15px; --text-base:17px; --text-lg:20px; --text-xl:28px; --text-2xl:40px; --text-display:48px; --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px; --space-6:48px; --space-9:72px; --space-12:96px; }
* { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; } body { margin:0; background:var(--paper); color:var(--ink); font:400 var(--text-base)/1.6 var(--sans); -webkit-font-smoothing:antialiased; } ::selection { background:var(--accent); color:var(--paper); } a { color:inherit; text-decoration-color:var(--accent); text-underline-offset:3px; transition:text-decoration-color .15s ease; } a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
.wrap { max-width:960px; margin:0 auto; padding:0 var(--space-3); } header.top { background:var(--paper); min-height:64px; padding:12px 0; display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); flex-wrap:wrap; } .wordmark { color:var(--ink); font:600 var(--text-base)/1.5 var(--sans); } .wordmark a,.top-nav a { text-decoration:none; } .top-nav { display:flex; align-items:center; flex-wrap:wrap; gap:28px; font:400 var(--text-sm)/1 var(--sans); } .top-nav a { color:var(--ink); display:inline-flex; align-items:center; height:40px; line-height:1; padding:0; } .top-nav a:hover,.top-nav a.current,.top-nav a[aria-current="page"] { font-weight:600; text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:5px; }
main { max-width:660px; margin:0; padding:var(--space-6) 0 0; } h1.post-title { font:600 var(--text-2xl)/1.15 var(--sans); letter-spacing:-.015em; margin:0 0 var(--space-2); max-width:24ch; } p.post-dek { color:var(--ink-dim); font-size:var(--text-lg); line-height:1.4; margin:0 0 var(--space-3); max-width:34ch; } .post-tags { display:flex; flex-wrap:wrap; gap:var(--space-1); margin:0 0 var(--space-6); } .post-tags span { border:1px solid var(--rule); border-radius:999px; color:var(--ink-dim); font:600 var(--text-xs)/1.5 var(--sans); letter-spacing:.06em; padding:0 var(--space-1); text-transform:uppercase; }
.prose p { margin:0 0 var(--space-3); max-width:62ch; } .prose h2.eyebrow { color:var(--ink); font:600 var(--text-xl)/1.25 var(--sans); letter-spacing:-.015em; margin:var(--space-9) 0 var(--space-3); text-transform:none; } .prose h2.eyebrow:first-child { margin-top:0; } .prose ul { margin:0 0 var(--space-3); padding-left:var(--space-3); } .prose blockquote { border-left:2px solid var(--accent); color:var(--ink-dim); margin:var(--space-3) 0; max-width:58ch; padding-left:var(--space-3); } .prose figure { margin:var(--space-4) 0; } .prose figure img,.prose figure svg { display:block; height:auto; width:100%; } .prose figcaption { color:var(--ink-dim); font-size:var(--text-sm); line-height:1.5; margin-top:var(--space-1); max-width:50ch; } .prose table { border-collapse:collapse; font-size:var(--text-sm); line-height:1.5; margin:var(--space-3) 0; width:100%; } .prose th,.prose td { border-bottom:1px solid var(--rule); padding:var(--space-1) var(--space-2); text-align:left; vertical-align:top; } .prose th { color:var(--ink-dim); font:600 var(--text-xs)/1.5 var(--sans); letter-spacing:.06em; text-transform:uppercase; } .prose td:first-child,.prose td:has(code),.prose td code { font-family:var(--mono); }
.related-reading { border-top:1px solid var(--rule); color:var(--ink-dim); font-size:var(--text-sm); line-height:1.5; margin-top:var(--space-6); padding-top:var(--space-3); } .related-reading h2 { color:var(--ink-dim); font:600 var(--text-sm)/1.5 var(--sans); margin:0 0 var(--space-1); } .related-reading ul { list-style:none; margin:0; padding:0; } .related-reading li { margin:0 0 var(--space-1); } hr.rule { border:0; border-top:1px solid var(--rule); margin:var(--space-9) 0 var(--space-6); width:84px; } p.close { max-width:62ch; } footer { border-top:1px solid var(--rule); margin-top:var(--space-12); padding:32px 0 64px; } footer p { color:var(--ink-dim); font-size:var(--text-sm); line-height:1.5; margin:0; } footer a { white-space:nowrap; }
@media (max-width:560px) { :root { --text-xs:13px; --text-sm:15px; --text-base:16px; --text-lg:19px; --text-xl:24px; --text-2xl:32px; --text-display:34px; } header.top { padding:16px 0; } .top-nav { gap:8px 28px; } h1.post-title,p.post-dek { max-width:none; } .prose table { display:block; overflow-x:auto; } }