/* Same neutral palette and wordmark type as www.kosnik.app; a serif for reading. */
:root{
  --bg:#edeff1;
  --fg:#1b1f23;
  --muted:#5e6770;
  --line:#c5ccd3;
  --code-bg:#e1e5e9;
  --f-hub:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-read:"Source Serif 4",Georgia,"Times New Roman",serif;
  --f-code:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#121518;--fg:#e4e8ec;--muted:#8e98a2;--line:#2c3339;--code-bg:#1c2125}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 17px/1.5 var(--f-hub);-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:3px solid var(--fg);outline-offset:3px;border-radius:2px}
.wrap{max-width:42rem;margin:0 auto;padding:0 20px}

nav.site{display:flex;align-items:baseline;gap:12px;padding:28px 0 0;font-size:17px}
nav.site a{text-decoration:none;color:var(--muted)}
nav.site a:hover{color:var(--fg)}
nav.site .mark{font-weight:800;font-variation-settings:"opsz" 24,"wdth" 75;letter-spacing:-.02em;color:var(--fg);font-size:22px}

.intro{padding:56px 0 36px}
.intro h1,article h1{font:800 clamp(44px,9vw,76px)/.9 var(--f-hub);font-variation-settings:"opsz" 96,"wdth" 75;letter-spacing:-.03em;margin:0}
.intro p{margin:16px 0 0;font-size:19px;line-height:1.4;color:var(--muted)}

.posts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.posts li{padding:24px 0 26px;border-bottom:1px solid var(--line)}
.posts time{font-size:15px;color:var(--muted)}
.posts h2{margin:6px 0 0;font:700 26px/1.15 var(--f-hub);font-variation-settings:"opsz" 32,"wdth" 85;letter-spacing:-.01em}
.posts h2 a{text-decoration:none}
.posts h2 a:hover{text-decoration:underline}
.posts p{margin:8px 0 0;color:var(--muted);max-width:36rem}
.empty{color:var(--muted);padding:8px 0}
.draft{display:inline-block;margin-left:8px;padding:1px 8px;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--muted)}

article header{padding:56px 0 32px}
article h1{font-size:clamp(36px,6.4vw,58px);line-height:.95;letter-spacing:-.012em;text-wrap:balance}
.meta{margin:16px 0 0;color:var(--muted);font-size:15px}

.prose{font:400 19px/1.65 var(--f-read);max-width:36rem}
.prose>*{margin:0 0 1.1em}
.prose h2,.prose h3{font-family:var(--f-hub);font-variation-settings:"opsz" 32,"wdth" 85;line-height:1.15;letter-spacing:-.01em;margin:1.8em 0 .5em}
.prose h2{font-size:28px;font-weight:700}
.prose h3{font-size:22px;font-weight:700}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin:.3em 0}
.prose blockquote{margin-left:0;padding-left:1em;border-left:3px solid var(--line);color:var(--muted)}
.prose img{max-width:100%;height:auto;border-radius:8px}
.prose hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.prose code{font:.85em/1 var(--f-code);background:var(--code-bg);padding:.12em .35em;border-radius:4px}
.prose pre{background:var(--code-bg);padding:16px 18px;border-radius:8px;overflow-x:auto;font-size:15px;line-height:1.5}
.prose pre code{background:none;padding:0;font-size:inherit;line-height:inherit}

footer{padding:64px 0 40px;color:var(--muted);font-size:14px}

@media (max-width:560px){
  .intro,article header{padding:40px 0 28px}
  .prose{font-size:18px}
}