/* Jimmy Okoth — shared site styles */
:root{
  --paper:#FAFAF7; --paper-2:#F2F1EB; --ink:#0B0B0B; --muted:#6B6B6B;
  --rule:#1A1A1A; --rule-soft:#D9D7CF; --lime:#C5F74F;
}
body.dark{ --paper:#0B0B0B; --paper-2:#141414; --ink:#FAFAF7; --muted:#8F8F8A; --rule:#2A2A2A; --rule-soft:#1F1F1F; }
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--paper);color:var(--ink);}
body{font-family:'League Spartan',system-ui,sans-serif;line-height:1.35;-webkit-font-smoothing:antialiased;}
.mono{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1320px;margin:0 auto;padding:0 32px;}
.narrow{max-width:820px;margin:0 auto;padding:0 32px;}
.ital{font-style:italic;font-weight:300;}
.hl{background:var(--lime);color:#0B0B0B;padding:0 .1em .04em;border-radius:4px;}

/* HEADER */
header.site{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--rule);}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;max-width:1320px;margin:0 auto;}
.brand{display:flex;align-items:center;gap:14px;}
.brand-avatar{width:36px;height:36px;border-radius:50%;background:var(--ink);overflow:hidden;border:1px solid var(--rule);}
.brand-avatar img{width:100%;height:100%;object-fit:cover;object-position:top center;}
.brand-text{display:flex;flex-direction:column;line-height:1;}
.brand-name{font-weight:700;font-size:18px;letter-spacing:-.01em;}
.brand-role{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.08em;}
.nav-links{display:flex;align-items:center;gap:28px;}
.nav-links a{font-size:15px;font-weight:500;}
.nav-links a.active{border-bottom:2px solid var(--lime);padding-bottom:2px;}
.nav-links a:hover{opacity:.7;}
.nav-cta{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:999px;font-size:14px;font-weight:600;}
.nav-cta:hover{transform:translateY(-1px);}
.mode-btn{background:none;border:1px solid var(--rule);width:34px;height:34px;border-radius:50%;cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:15px;}

/* Breadcrumb */
.crumb{border-bottom:1px solid var(--rule-soft);padding:14px 0;font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);display:flex;gap:12px;align-items:center;}
.crumb a:hover{color:var(--ink);}
.crumb .sep{opacity:.4;}

/* Page hero (for sub-pages) */
.page-hero{padding:56px 0 48px;border-bottom:1px solid var(--rule);}
.page-hero .eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:24px;}
.page-hero .eyebrow .bullet{width:6px;height:6px;background:var(--lime);border-radius:50%;}
.page-hero h1{font-weight:700;font-size:clamp(48px,7vw,96px);line-height:.94;letter-spacing:-.03em;text-wrap:balance;max-width:18ch;}
.page-hero .lede{font-size:20px;line-height:1.45;max-width:56ch;color:var(--muted);margin-top:28px;letter-spacing:-.005em;}

.meta-row{display:grid;grid-template-columns:repeat(4,1fr);margin-top:48px;border-top:1px solid var(--rule);}
.meta-cell{padding:24px 20px;border-right:1px solid var(--rule);}
.meta-cell:last-child{border-right:none;}
.meta-cell .k{font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:10px;}
.meta-cell .v{font-size:18px;font-weight:600;letter-spacing:-.01em;}

/* Article prose */
.prose{padding:80px 0;}
.prose p{font-size:19px;line-height:1.6;margin-bottom:22px;letter-spacing:-.005em;}
.prose p.lede{font-size:24px;line-height:1.4;margin-bottom:36px;color:var(--ink);font-weight:400;letter-spacing:-.015em;}
.prose h2{font-size:36px;font-weight:600;letter-spacing:-.025em;margin:64px 0 20px;line-height:1.05;text-wrap:balance;}
.prose h3{font-size:24px;font-weight:600;letter-spacing:-.015em;margin:40px 0 14px;}
.prose ul, .prose ol{margin:0 0 22px 22px;}
.prose li{font-size:18px;line-height:1.55;margin-bottom:10px;}
.prose blockquote{border-left:3px solid var(--lime);padding:18px 24px;font-size:22px;line-height:1.4;letter-spacing:-.01em;margin:32px 0;background:var(--paper-2);font-weight:500;}
.prose code{font-family:'JetBrains Mono',monospace;font-size:14px;background:var(--paper-2);padding:2px 6px;border-radius:3px;}
.prose pre{font-family:'JetBrains Mono',monospace;font-size:13px;background:var(--paper-2);padding:20px 24px;border-radius:6px;overflow-x:auto;border:1px solid var(--rule-soft);margin:28px 0;line-height:1.5;}
.prose hr{border:none;border-top:1px solid var(--rule);margin:48px 0;}
.prose strong{font-weight:600;}
.prose a.inline{border-bottom:1px solid var(--ink);}
.prose a.inline:hover{color:#158A3B;border-color:#158A3B;}

/* Callout */
.callout{border:1px solid var(--rule);border-radius:8px;padding:24px 28px;margin:32px 0;display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:start;}
.callout .icon{width:32px;height:32px;border-radius:50%;background:var(--lime);color:#0B0B0B;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;}
.callout .body{font-size:16px;line-height:1.55;}
.callout .body strong{display:block;font-size:13px;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px;color:var(--muted);}

/* Data table */
.dtable{width:100%;border-collapse:collapse;font-size:15px;margin:24px 0 32px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.dtable th,.dtable td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--rule-soft);vertical-align:top;}
.dtable th{font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);background:var(--paper-2);border-bottom:1px solid var(--rule);}
.dtable td:first-child{font-weight:500;}
.dtable .num{font-family:'JetBrains Mono',monospace;font-weight:500;text-align:right;white-space:nowrap;}
.dtable tr:last-child td{border-bottom:none;}

/* Big metric card row */
.metric-row{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--rule);border-radius:8px;margin:32px 0;overflow:hidden;}
.metric-row > div{padding:28px 24px;border-right:1px solid var(--rule);}
.metric-row > div:last-child{border-right:none;}
.metric-row .k{font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:12px;}
.metric-row .v{font-size:40px;font-weight:700;letter-spacing:-.03em;line-height:1;}
.metric-row .d{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.4;}

/* Simulated disclaim banner */
.disclaim-banner{background:var(--paper-2);border:1px solid var(--rule);border-left:3px solid var(--lime);padding:18px 24px;margin:32px 0;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.05em;line-height:1.5;}
.disclaim-banner strong{text-transform:uppercase;letter-spacing:.1em;font-size:11px;display:block;margin-bottom:6px;color:var(--ink);}

/* Author card */
.author{display:grid;grid-template-columns:80px 1fr;gap:18px;align-items:center;padding:28px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:64px 0 32px;}
.author-avatar{width:72px;height:72px;border-radius:50%;overflow:hidden;background:var(--ink);border:1px solid var(--rule);}
.author-avatar img{width:100%;height:100%;object-fit:cover;object-position:top center;filter:grayscale(100%);}
.author .t{font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:6px;}
.author .n{font-size:22px;font-weight:600;letter-spacing:-.015em;}
.author .d{font-size:14px;color:var(--muted);margin-top:4px;}

/* TOC (sidebar) */
.toc{position:sticky;top:96px;font-family:'JetBrains Mono',monospace;font-size:12px;}
.toc .t{text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--rule-soft);}
.toc a{display:block;padding:7px 0;color:var(--muted);line-height:1.4;border-left:2px solid transparent;padding-left:10px;margin-left:-10px;}
.toc a:hover{color:var(--ink);border-left-color:var(--rule-soft);}
.toc a.active{color:var(--ink);border-left-color:var(--lime);}

/* Related */
.related{padding:80px 0;border-top:1px solid var(--rule);background:var(--paper-2);}
.related-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:40px;padding-bottom:20px;border-bottom:1px solid var(--rule);}
.related-head h2{font-size:36px;font-weight:600;letter-spacing:-.025em;}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.rel-card{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--rule);padding-top:18px;}
.rel-card .m{font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);display:flex;justify-content:space-between;}
.rel-card h3{font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.25;}
.rel-card p{font-size:14px;color:var(--muted);line-height:1.5;}
.rel-card .rr{font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.1em;margin-top:6px;}

/* CTA banner */
.cta-band{border-top:1px solid var(--rule);background:var(--ink);color:var(--paper);padding:80px 0;}
body.dark .cta-band{background:var(--paper-2);color:var(--ink);}
.cta-band-inner{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;}
.cta-band h2{font-size:clamp(40px,5vw,64px);font-weight:600;letter-spacing:-.03em;line-height:.98;text-wrap:balance;max-width:18ch;}
.cta-band h2 .hl{background:var(--lime);color:#0B0B0B;padding:0 .1em .04em;border-radius:6px;}
.cta-primary{display:inline-flex;align-items:center;gap:12px;background:var(--lime);color:#0B0B0B;padding:18px 28px;border-radius:999px;font-size:17px;font-weight:600;border:1px solid #B9E942;white-space:nowrap;}
.cta-primary:hover{transform:translateY(-2px);}
.cta-primary .disc{width:28px;height:28px;border-radius:50%;background:#0B0B0B;color:var(--lime);display:inline-flex;align-items:center;justify-content:center;font-size:14px;}

/* Footer */
footer.site{background:var(--paper);border-top:1px solid var(--rule);padding:40px 0 32px;}
.foot{display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px;padding-bottom:40px;border-bottom:1px solid var(--rule);}
.foot .k{font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:14px;}
.foot a{display:block;font-size:15px;margin-bottom:8px;}
.foot a:hover{opacity:.6;}
.foot-bot{display:flex;justify-content:space-between;padding-top:22px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;}

/* Blog index */
.blog-hero{padding:80px 0 56px;border-bottom:1px solid var(--rule);}
.blog-hero h1{font-weight:700;font-size:clamp(64px,9vw,128px);line-height:.92;letter-spacing:-.035em;}
.blog-hero .lede{font-size:20px;color:var(--muted);max-width:52ch;margin-top:28px;line-height:1.5;}
.blog-filter{display:flex;gap:12px;margin-top:40px;flex-wrap:wrap;}
.blog-filter button{font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.1em;padding:10px 16px;border:1px solid var(--rule);background:transparent;color:var(--ink);border-radius:999px;cursor:pointer;}
.blog-filter button.on{background:var(--ink);color:var(--paper);}
body.dark .blog-filter button.on{background:var(--lime);color:#0B0B0B;border-color:var(--lime);}

.post-list{border-top:1px solid var(--rule);}
.post-item{display:grid;grid-template-columns:100px 120px 1fr 180px 80px;gap:32px;padding:32px 0;border-bottom:1px solid var(--rule);align-items:center;transition:background .2s;}
.post-item:hover{background:var(--paper-2);}
.post-item .idx{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);letter-spacing:.1em;}
.post-item .tag{font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.1em;padding:6px 10px;border:1px solid var(--rule-soft);border-radius:4px;display:inline-block;text-align:center;}
.post-item h3{font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.15;text-wrap:balance;}
.post-item .p{color:var(--muted);font-size:14px;margin-top:6px;max-width:54ch;line-height:1.45;}
.post-item .date{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);letter-spacing:.05em;}
.post-item .arr{width:36px;height:36px;border-radius:50%;background:var(--paper-2);border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;justify-self:end;transition:all .25s;}
.post-item:hover .arr{background:var(--lime);border-color:var(--lime);transform:translate(3px,-3px);}

/* Section rule */
.section-mark{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:40px 0 20px;border-top:1px solid var(--rule);margin-top:40px;}

/* Tweaks panel (shared subset) */
.tweaks-panel{position:fixed;bottom:20px;right:20px;z-index:100;background:var(--paper);border:1px solid var(--rule);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.12);padding:16px 18px;width:260px;display:none;}
.tweaks-panel.on{display:block;}
.tweaks-panel h4{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;}
.tweak-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:14px;}
.tweak-swatches{display:flex;gap:6px;}
.tweak-sw{width:22px;height:22px;border-radius:50%;border:2px solid var(--rule-soft);cursor:pointer;}
.tweak-sw.on{border-color:var(--ink);}
.tweak-toggle{appearance:none;width:34px;height:20px;background:var(--rule-soft);border-radius:999px;position:relative;cursor:pointer;}
.tweak-toggle::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;background:var(--paper);border-radius:50%;transition:all .2s;}
.tweak-toggle:checked{background:var(--ink);}
.tweak-toggle:checked::after{left:16px;}

@media (max-width:900px){
  .nav-links a:not(.nav-cta){display:none;}
  .meta-row{grid-template-columns:1fr 1fr;}
  .meta-cell:nth-child(2n){border-right:none;}
  .metric-row,.related-grid{grid-template-columns:1fr;}
  .metric-row > div{border-right:none;border-bottom:1px solid var(--rule);}
  .cta-band-inner{grid-template-columns:1fr;}
  .post-item{grid-template-columns:1fr;gap:10px;}
  .post-item .idx,.post-item .tag,.post-item .date{display:none;}
  .post-item .arr{justify-self:start;}
}

@media (max-width:640px){
  .wrap,.narrow{padding:0 20px;}
  .nav{padding:12px 20px;}
  .blog-hero{padding:48px 0 36px;}
  .blog-hero h1{font-size:clamp(40px,10.5vw,72px);}
  .blog-hero .lede{font-size:17px;}
  .page-hero{padding:36px 0 28px;}
  .page-hero h1{font-size:clamp(32px,8.5vw,56px);}
  .cta-band{padding:56px 0;}
  .cta-band h2{font-size:clamp(28px,7.5vw,44px);}
  .cta-band-inner{gap:24px;}
  .foot{grid-template-columns:1fr;gap:24px;}
  .foot-bot{flex-direction:column;gap:8px;}
  .related{padding:56px 0;}
  .related-grid{gap:20px;}
  .tweaks-panel{width:calc(100vw - 40px);}
}