:root{
  --ink:#161412; --paper:#fbfaf7; --line:#dcd8d0; --mute:#8a857c; --soft:#56524b;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper); color:var(--ink); font-family:Spectral,Georgia,serif; line-height:1.6; -webkit-font-smoothing:antialiased}
a{color:inherit}
.sans{font-family:"Helvetica Neue",Arial,sans-serif}

.layout{display:grid; grid-template-columns:282px 1fr; min-height:100vh}

aside{border-right:1px solid var(--line); padding:54px 36px; position:sticky; top:0; height:100vh; display:flex; flex-direction:column}
aside .brand{font-weight:300; font-size:27px; line-height:1.15; margin-bottom:6px; text-decoration:none; display:block; color:var(--ink)}
aside .role{font-family:"Helvetica Neue",Arial,sans-serif; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--mute); margin-bottom:42px}
.navgroup{font-family:"Helvetica Neue",Arial,sans-serif; font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--mute); margin:24px 0 10px}
aside nav a{display:block; text-decoration:none; color:#3a3631; font-size:16px; padding:7px 0}
aside nav a:hover{color:var(--ink)}
aside nav a.active{border-left:2px solid var(--ink); padding-left:12px; margin-left:-14px; color:var(--ink)}
aside .foot{margin-top:auto; padding-top:32px; font-family:"Helvetica Neue",Arial,sans-serif; font-size:11px; color:var(--mute); letter-spacing:.05em}
aside .foot a{text-decoration:none}

main{padding:64px 72px; max-width:780px}
.crumbs{font-family:"Helvetica Neue",Arial,sans-serif; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); margin-bottom:18px}
.crumbs a{text-decoration:none}
main h1{font-weight:300; font-size:42px; line-height:1.1; margin-bottom:14px}
main .intro{font-style:italic; font-size:18px; color:var(--soft); margin-bottom:8px; max-width:54ch}

.entry{padding:24px 0; border-bottom:1px solid var(--line)}
.entry:first-of-type{border-top:1px solid var(--line); margin-top:40px}
.entry a.head{text-decoration:none; display:block}
.entry .row{display:flex; justify-content:space-between; align-items:baseline; gap:20px}
.entry h2{font-weight:400; font-size:23px; line-height:1.22}
.entry a.head:hover h2{text-decoration:underline; text-underline-offset:4px}
.entry .date{font-family:"Helvetica Neue",Arial,sans-serif; font-size:11px; letter-spacing:.12em; color:var(--mute); white-space:nowrap}
.entry .dek{font-style:italic; color:#6b665e; font-size:16px; margin-top:6px; max-width:62ch}

.article{max-width:680px}
.article .meta{font-family:"Helvetica Neue",Arial,sans-serif; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); margin-bottom:20px}
.article h1{font-size:46px; margin-bottom:26px}
.article .body{font-size:19px; line-height:1.78}
.article .body p{margin:0 0 1.4em}
.article .body > p:first-of-type{font-size:21px; line-height:1.7; color:#2c2925}
.article .body h2{font-weight:500; font-size:27px; line-height:1.2; margin:2.7em 0 .7em; padding-top:1.7em; border-top:1px solid var(--line)}
.article .body > h2:first-child{margin-top:.2em; padding-top:0; border-top:0}
.article .body h3{font-weight:500; font-size:20px; margin:2em 0 .4em}
.article .body ul,.article .body ol{margin:0 0 1.4em 1.2em}
.article .body li{margin:.45em 0; padding-left:.2em}
.article .body blockquote{border-left:2px solid var(--ink); margin:1.6em 0; padding:.3em 0 .3em 1.3em; font-style:italic; color:var(--soft); font-size:20px}
.article .body a{text-underline-offset:3px}
.article .body hr{border:0; border-top:1px solid var(--line); margin:2.4em 0}
.article .body h4{font-weight:500; font-size:18px; margin:1.4em 0 .3em}
.article .body img{max-width:100%; height:auto; display:block; margin:1.8em 0}
.article .body code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:.86em; background:#efece4; padding:.12em .35em; border-radius:0}
.article .body pre{position:relative; background:#1d1b18; color:#f1efe8; padding:42px 20px 18px; overflow:auto; margin:1.8em 0; font-size:13.5px; line-height:1.55}
.article .body pre code{background:none; padding:0; color:inherit; font-size:inherit}
.article .body table{border-collapse:collapse; width:100%; margin:1.6em 0; font-size:16px}
.article .body th,.article .body td{border:1px solid var(--line); padding:10px 14px; text-align:left}
.article .body th{font-weight:500; background:#f1efe8}
.article .back{display:inline-block; margin-top:48px; font-family:"Helvetica Neue",Arial,sans-serif; font-size:12px; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; color:var(--mute)}
.article .back:hover{color:var(--ink)}

.copy-btn{position:absolute; top:9px; right:9px; font-family:"Helvetica Neue",Arial,sans-serif; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#cfcabf; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.2); padding:5px 11px; cursor:pointer; transition:background .15s}
.copy-btn:hover{background:rgba(255,255,255,.16); color:#fff}

.home .kicker{font-family:"Helvetica Neue",Arial,sans-serif; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--mute); margin-bottom:18px}
.home h1{font-size:42px; line-height:1.12; max-width:17ch; margin-bottom:30px}
.home .body{font-size:18px}
.home .body > p:first-of-type{font-size:21px; color:#2c2925}
.contact{margin-top:52px; padding-top:34px; border-top:1px solid var(--line)}
.tg-btn{display:inline-block; background:var(--ink); color:var(--paper); font-family:"Helvetica Neue",Arial,sans-serif; font-size:13px; letter-spacing:.08em; text-transform:uppercase; padding:15px 28px; text-decoration:none}
.tg-btn:hover{background:#000}
.contact-meta{margin-top:18px; font-family:"Helvetica Neue",Arial,sans-serif; font-size:13px; letter-spacing:.03em; color:var(--mute)}
.contact-meta a{color:var(--soft); text-decoration:none}
.contact-meta a:hover{color:var(--ink)}

@media (max-width:760px){
  .layout{grid-template-columns:1fr}
  aside{position:static; height:auto; border-right:0; border-bottom:1px solid var(--line); padding:36px 28px}
  aside .foot{display:none}
  main{padding:40px 28px}
  main h1,.article h1{font-size:34px}
  .article .body{font-size:17px}
}