/* kompound · blog. One stylesheet for blog/index.html and every post (how to add one: docs/BLOG.md).
   Tokens, nav and footer are the legal pages' (privacy.html), so the section reads as the same site;
   only the list and the article measure are new. */
:root{--ink:#0A0F0C;--tt:#556259;--g6:#16A34A;--hair:rgba(10,15,12,.08);--tile:#EFF1F0}
*{box-sizing:border-box}body{margin:0;background:#fff;color:var(--ink);font:400 16px/24px 'DM Sans',sans-serif}
.bloom{position:fixed;inset:0;pointer-events:none;background:radial-gradient(1400px 900px at 0% 0%,rgba(34,197,94,.13),transparent 62%),radial-gradient(1100px 800px at 100% 55%,rgba(34,197,94,.05),transparent 60%),radial-gradient(900px 600px at 100% 100%,rgba(127,179,255,.07),transparent 60%)}
.wrap{position:relative;max-width:820px;margin:0 auto;padding:28px 48px 96px}
nav{display:flex;justify-content:space-between;align-items:center;height:48px;margin-bottom:48px}
.logo{font:600 22px/22px Outfit,sans-serif;letter-spacing:-.5px;color:var(--ink);text-decoration:none}
.back{font:400 15px/20px 'DM Sans',sans-serif;color:var(--tt);text-decoration:none}.back:hover{color:var(--ink)}
h1{font:600 40px/44px Outfit,sans-serif;letter-spacing:-1.2px;margin:0 0 32px}
h2{font:600 20px/26px Outfit,sans-serif;letter-spacing:-.4px;margin:36px 0 10px}
p{margin:0 0 12px;font:400 15px/24px 'DM Sans',sans-serif;color:var(--tt)}p b{font-weight:500;color:var(--ink)}p a{color:#15803D;text-decoration:none}
.reg{display:block;margin-top:40px;padding-top:24px;border-top:1px solid var(--hair);font:400 11px/16px 'JetBrains Mono',monospace;letter-spacing:.9px;text-transform:uppercase;color:var(--tt)}
@media(max-width:700px){.wrap{padding:20px 20px 64px}h1{font-size:30px;line-height:34px}}
footer.lfoot{margin:56px calc(50% - 50vw) -96px;padding:48px calc(50vw - 50%) 72px;border-top:0;background:var(--tile)}.lfoot .fnote{margin:0 0 6px;font:400 16px/24px 'DM Sans',sans-serif;color:var(--ink)}.lfoot .fhow{margin:0 0 10px;font:400 13px/20px 'DM Sans',sans-serif;color:var(--tt)}.lfoot{max-width:none}.lfoot .fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}.lfoot .flines{margin-top:28px;padding-top:28px;border-top:1px solid rgba(10,15,12,.08)}.lfoot .fk{font:400 11px/16px 'JetBrains Mono',monospace;letter-spacing:.9px;text-transform:uppercase;color:var(--tt);margin-bottom:12px}.lfoot .fgrid p{margin:0 0 12px;font:400 13px/20px 'DM Sans',sans-serif;color:var(--tt)}.lfoot .fgrid p a{color:#15803D;text-decoration:none}.lfoot .fdisc{margin:16px 0 0;font:400 12px/18px 'DM Sans',sans-serif;color:rgba(10,15,12,.5);max-width:820px}@media(max-width:1000px){.lfoot .fgrid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.lfoot .fgrid{grid-template-columns:1fr;gap:20px}}.lfoot .fgrid{grid-template-columns:1fr 1fr}
.lfoot .flinks{margin:20px 0 0;font:400 13px/20px 'DM Sans',sans-serif;color:var(--tt)}.lfoot .flinks a{color:var(--tt);text-decoration:none}.lfoot .flinks a:hover{color:var(--ink)}
.meta{font:400 11px/16px 'JetBrains Mono',monospace;letter-spacing:.9px;text-transform:uppercase;color:var(--tt);margin:-16px 0 32px}
ul{margin:0 0 12px;padding-left:20px}li{font:400 15px/24px 'DM Sans',sans-serif;color:var(--tt);margin:0 0 6px}li b{font-weight:500;color:var(--ink)}
blockquote{margin:0 0 12px;padding:14px 18px;border-left:2px solid var(--g6);background:var(--tile);border-radius:0 10px 10px 0}blockquote p{margin:0}

/* the list */
.lede{margin:-16px 0 40px;max-width:560px;font:400 17px/26px 'DM Sans',sans-serif;color:var(--tt)}
.posts{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.posts li{margin:0;padding:0;border-bottom:1px solid var(--hair)}
.posts a{display:block;padding:24px 0;color:inherit;text-decoration:none}
.posts time{display:block;margin:0 0 8px;font:400 11px/16px 'JetBrains Mono',monospace;letter-spacing:.9px;text-transform:uppercase;color:var(--tt)}
.posts b{display:block;font:600 22px/28px Outfit,sans-serif;letter-spacing:-.4px;color:var(--ink)}
.posts span{display:block;margin-top:6px;font:400 15px/24px 'DM Sans',sans-serif;color:var(--tt)}
.posts a:hover b{text-decoration:underline;text-decoration-color:var(--g6);text-underline-offset:5px;text-decoration-thickness:2px}
.empty{margin:0;padding:28px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}

/* a post */
article{max-width:680px}
article .meta{margin:0 0 14px}
article h1{margin:0 0 28px}
article p,article li{font-size:17px;line-height:28px;color:var(--ink)}
article p{margin:0 0 18px}
article h2{font-size:24px;line-height:30px;margin:40px 0 12px}
article h3{font:600 18px/24px Outfit,sans-serif;letter-spacing:-.2px;margin:28px 0 8px}
article ul,article ol{margin:0 0 18px;padding-left:22px}
article blockquote{margin:0 0 18px}article blockquote p{margin:0}
article figure{margin:28px 0}article img{display:block;max-width:100%;height:auto;border-radius:12px}
article figcaption{margin-top:8px;font:400 13px/20px 'DM Sans',sans-serif;color:var(--tt)}
article .note{margin:40px 0 0;padding:16px 18px;background:var(--tile);border-radius:12px;font:400 14px/22px 'DM Sans',sans-serif;color:var(--tt)}
@media(max-width:700px){.wrap{padding:20px 16px 64px}article p,article li{font-size:16px;line-height:26px}.posts b{font-size:20px;line-height:26px}}
.posts:has(li)+.empty{display:none}   /* the "nothing here yet" line goes away by itself once a post is listed */
/* the legal pages' footer CSS ends on an unconditional two-column grid, which also wins on a phone;
   restate the landing page's one column below 600px after it */
@media(max-width:600px){.lfoot .fgrid{grid-template-columns:1fr;gap:20px}}