@font-face { font-family: 'Geist'; src: url(assets/fonts/geist.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
* { box-sizing: border-box; }
body { margin: 0; background: #ebe8e3; color: #141414; font: 400 17px/1.65 'Geist', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
header, main, footer { max-width: 760px; margin: 0 auto; padding: 0 22px; }
header { padding-top: 26px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 620; text-decoration: none; color: inherit; }
.brand-mark { width: 22px; height: 22px; border: 2px solid currentColor; border-radius: 6px; position: relative; }
.brand-mark::after { content: ''; position: absolute; inset: 4px 7px 4px 4px; border-radius: 2px; background: currentColor; }
main { padding-top: 40px; padding-bottom: 60px; }
h1 { font-size: 44px; letter-spacing: -.035em; line-height: 1.05; margin: 10px 0 6px; }
h2 { font-size: 21px; letter-spacing: -.015em; margin: 34px 0 8px; }
p, li { color: #3d3a36; } ul { padding-left: 20px; } li { margin: 6px 0; }
a { color: inherit; }
.upd { color: #6b6862; font-size: 15px; margin: 0; }
.draft { display: inline-block; font-size: 13px; padding: 6px 10px; border-radius: 8px; background: #141414; color: #fff; margin: 0; }
.todo { background: #dedad3; color: #4a4741; padding: 0 4px; border-radius: 3px; }
footer { padding-bottom: 40px; font-size: 15px; }