:root{
  --paper:#F7F3EC; --paper-2:#EFEADF; --ink:#211F1C; --clay:#C9542A;
  --slate:#5C5953; --border:#E2DACB; --tan:#A9846B; --white:#FFFFFF;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Space Grotesk',-apple-system,system-ui,sans-serif;
  line-height:1.5; -webkit-font-smoothing:antialiased;
}
.mono{font-family:'JetBrains Mono',monospace;}
.wrap{max-width:760px; margin:0 auto; padding:0 24px;}
a{color:inherit; text-decoration:none;}

/* nav */
header{position:sticky; top:0; z-index:10; background:rgba(247,243,236,0.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--border);}
.nav{max-width:1080px; margin:0 auto; padding:16px 24px; display:flex; justify-content:space-between; align-items:center;}
.logo{font-weight:600; font-size:18px; letter-spacing:-0.3px;}
.nav-links{display:flex; gap:24px; align-items:center; font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--slate);}
.nav-links a:hover{color:var(--ink);}

/* buttons */
.btn{font-weight:500; font-size:15px; border-radius:8px; padding:12px 20px; display:inline-block; cursor:pointer; transition:transform .08s ease, background .15s ease;}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--clay); color:#fff;}
.btn-primary:hover{background:#b3481f;}
.btn-sm{padding:8px 15px; font-size:14px;}

/* article */
article{padding:56px 0 24px;}
.back{font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--slate); display:inline-block; margin-bottom:26px;}
.back:hover{color:var(--clay);}
.art-tag{font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.5px; color:var(--clay); margin:0 0 14px;}
.art-title{font-size:clamp(28px,5vw,40px); font-weight:500; line-height:1.14; letter-spacing:-0.8px; margin:0 0 16px;}
.art-summary{font-size:18px; color:var(--slate); line-height:1.6; margin:0 0 18px;}
.art-meta{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--tan); padding-bottom:28px; border-bottom:1px solid var(--border); margin-bottom:8px;}

article h2{font-size:24px; font-weight:500; letter-spacing:-0.3px; margin:42px 0 14px;}
article h3{font-size:17px; font-weight:500; margin:28px 0 10px;}
article p{font-size:16.5px; line-height:1.7; color:var(--ink); margin:0 0 18px;}
article p.muted{color:var(--slate);}
article ul{padding-left:0; list-style:none; margin:0 0 18px;}
article li{position:relative; padding-left:22px; font-size:16.5px; line-height:1.6; color:var(--ink); margin-bottom:11px;}
article li::before{content:""; position:absolute; left:2px; top:11px; width:6px; height:6px; border-radius:50%; background:var(--clay);}
article li strong, article p strong{font-weight:500;}
article code{font-family:'JetBrains Mono',monospace; font-size:14px; background:var(--paper-2); border:1px solid var(--border); border-radius:5px; padding:1px 6px;}

/* code blocks */
.codewrap{margin:0 0 22px;}
.codewrap .cap{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.4px; color:var(--tan); margin-bottom:8px;}
pre.code{margin:0; background:var(--ink); border-radius:10px; padding:18px 20px; overflow:auto; font-family:'JetBrains Mono',monospace; font-size:13.5px; line-height:1.7; color:#E9E2D4;}
pre.code .cm{color:#A9846B;}
pre.code .kw{color:#E8956B;}
pre.code .st{color:#C9D6A6;}

/* flow line (described approach) */
.flow{display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-family:'JetBrains Mono',monospace; font-size:13px; margin:4px 0 24px;}
.flow .node{background:var(--white); border:1px solid var(--border); border-radius:8px; padding:9px 13px;}
.flow .node.hub{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.flow .arr{color:var(--clay);}

/* honest callout — edge cases */
.callout{background:var(--white); border:1px solid var(--border); border-left:3px solid var(--clay); border-radius:0 10px 10px 0; padding:18px 20px; margin:8px 0 22px;}
.callout .lab{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.4px; color:var(--clay); margin-bottom:6px;}
.callout p:last-child, .callout ul:last-child, .callout li:last-child{margin-bottom:0;}

/* vs the off-the-shelf app — comparison block */
.vs{margin:8px 0 22px;}
.vs .lab{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.4px; color:var(--clay); margin-bottom:12px;}
.vs-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.vs-col{background:var(--white); border:1px solid var(--border); border-radius:10px; padding:18px 20px;}
.vs-col.ours{border-left:3px solid var(--clay); border-radius:0 10px 10px 0;}
.vs-col .h{font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.3px; color:var(--slate); margin-bottom:12px;}
.vs-col.ours .h{color:var(--clay);}
.vs-col ul{padding-left:0; list-style:none; margin:0;}
.vs-col li{position:relative; padding-left:22px; font-size:14.5px; line-height:1.5; color:var(--ink); margin-bottom:10px;}
.vs-col li:last-child{margin-bottom:0;}
.vs-col li::before{content:""; position:absolute; left:2px; top:8px; width:6px; height:6px; border-radius:50%; background:var(--tan);}
.vs-col.ours li::before{background:var(--clay);}
@media (max-width:680px){ .vs-grid{grid-template-columns:1fr;} }

/* end CTA */
.endcta{background:var(--ink); border-radius:14px; padding:30px 28px; margin:44px 0 8px; text-align:center;}
.endcta h3{font-size:20px; font-weight:500; color:var(--paper); margin:0 0 8px;}
.endcta p{font-family:'JetBrains Mono',monospace; font-size:13px; color:#C9A38B; margin:0 0 20px; line-height:1.6;}

/* related */
.related{padding:36px 0 20px; border-top:1px solid var(--border);}
.related .lab{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--tan); margin-bottom:14px;}
.rel-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.rel-card{background:var(--white); border:1px solid var(--border); border-radius:10px; padding:16px; transition:transform .12s ease;}
.rel-card:hover{transform:translateY(-2px);}
.rel-card .tag{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--clay);}
.rel-card .t{font-size:15px; font-weight:500; margin-top:8px; line-height:1.3;}

/* work index */
.work-head{padding:56px 0 6px;}
.work-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:20px 0 4px;}
.work-card{background:var(--white); border:1px solid var(--border); border-radius:12px; padding:22px; transition:transform .12s ease, box-shadow .12s ease; display:block;}
.work-card:hover{transform:translateY(-2px); box-shadow:0 6px 20px rgba(33,31,28,0.06);}
.work-card .tag{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.4px; color:var(--clay);}
.work-card .t{font-size:19px; font-weight:500; line-height:1.25; margin:10px 0 8px;}
.work-card .d{font-size:15px; color:var(--slate); line-height:1.55; margin:0 0 14px;}
.work-card .meta{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--tan);}

/* footer */
footer{padding:28px 0; border-top:1px solid var(--border); margin-top:36px;}
footer .fwrap{max-width:1080px; margin:0 auto; padding:0 24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--tan);}

@media (max-width:680px){
  .nav-links a:not(.btn){display:none;}
  .rel-grid{grid-template-columns:1fr;}
  .work-grid{grid-template-columns:1fr;}
}