/* Blog styles: same tokens as the homepage */
:root{
  color-scheme: light;
  --paper:#F1F2ED; --paper-2:#E7E8E0; --ink:#141210; --white:#FFFFFF;
  --blue:#1B2CF0; --lime:#B6F13C; --coral:#FF4D2E; --pink:#FF3D9A; --yellow:#FFC400;
  --gutter:clamp(16px,4.5vw,72px);
  --bd:2.5px solid var(--ink); --sh:6px 6px 0 var(--ink);
  --f-display:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;
  --f-body:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --f-mono:"Martian Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);
  font-size:clamp(16px,0.5vw+14px,18px);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);font-weight:800;letter-spacing:-.02em;line-height:1.05;text-wrap:balance}
::selection{background:var(--yellow)}
a:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.bwrap{max-width:1100px;margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{font-family:var(--f-mono);font-weight:500;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.6em;margin:0}
.eyebrow::before{content:"";width:22px;height:2.5px;background:currentColor}

/* nav */
.bnav{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:18px var(--gutter);background:var(--ink);color:var(--paper)}
.bnav a{text-decoration:none}
.bnav__brand{font-family:var(--f-display);font-weight:800;font-size:1.1rem}
.bnav__links{display:flex;gap:1.8rem;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase}
.bnav__links a:hover{color:var(--lime)}
.bnav__cta{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  border:2.5px solid var(--paper);padding:.55em .9em}
.bnav__cta:hover{background:var(--lime);color:var(--ink);border-color:var(--lime)}
@media (max-width:700px){.bnav__links{display:none}}

/* index */
.bindex__head{padding-block:clamp(48px,8vw,96px) clamp(24px,4vw,48px);max-width:46rem}
.bindex__head h1{font-size:clamp(2.4rem,6.5vw,4.8rem);margin:.5rem 0 1rem}
.bindex__head p:last-child{font-size:1.15rem;max-width:52ch}
.pillar{margin-block:clamp(32px,5vw,64px)}
.pillar h2{font-size:clamp(1.6rem,3.4vw,2.4rem);border-bottom:4px solid var(--ink);padding-bottom:.6rem;margin-bottom:1.4rem}
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:20px}
.cards a{display:flex;flex-direction:column;gap:.6rem;height:100%;text-decoration:none;background:var(--white);
  border:var(--bd);box-shadow:var(--sh);padding:1.3rem;transition:transform .12s ease,box-shadow .12s ease}
.cards a:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.cards h3{font-size:1.25rem;margin:0}
.cards p{margin:0;font-size:.95rem;line-height:1.5;flex:1}
.cards span{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}

/* post */
.crumbs{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;padding-top:28px;opacity:.7}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.post article{max-width:44rem}
.post__head{padding-block:clamp(28px,5vw,56px) 1.4rem;border-bottom:4px solid var(--ink);margin-bottom:2rem}
.post__head h1{font-size:clamp(2.1rem,5.4vw,3.8rem);margin:.6rem 0 1rem}
.post__meta{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.05em;margin:0;opacity:.8}
.prose h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:2.6rem 0 .8rem}
.prose h3{font-size:clamp(1.15rem,2vw,1.4rem);margin:1.9rem 0 .5rem}
.prose p,.prose ul,.prose ol{margin:0 0 1.1rem}
.prose li{margin-bottom:.4rem}
.prose a{text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--blue)}
.prose a:hover{background:var(--lime)}
.prose strong{font-weight:700}
.prose blockquote{margin:1.6rem 0;padding:1.1rem 1.3rem;background:var(--lime);border:var(--bd);box-shadow:var(--sh);font-size:1.08rem}
.prose blockquote p:last-child{margin:0}
.prose table{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.92rem;display:block;overflow-x:auto}
.prose th,.prose td{border:2px solid var(--ink);padding:.6em .75em;text-align:left;vertical-align:top}
.prose th{background:var(--ink);color:var(--paper);font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
.prose td{background:var(--white)}
.prose code{font-family:var(--f-mono);font-size:.85em;background:var(--paper-2);padding:.1em .35em}
.prose hr{border:0;border-top:3px solid var(--ink);margin:2.4rem 0}

/* cta + related */
.bcta{margin-block:clamp(40px,6vw,72px);background:var(--yellow);border:4px solid var(--ink);box-shadow:12px 12px 0 var(--ink);
  padding:clamp(24px,4vw,44px);max-width:44rem}
.bcta h2{font-size:clamp(1.6rem,3.6vw,2.4rem);margin:.6rem 0 .8rem}
.bcta p{max-width:52ch}
.bbtn{display:inline-block;margin-top:.8rem;font-family:var(--f-mono);font-weight:700;font-size:.8rem;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;padding:1em 1.4em;background:var(--ink);color:var(--paper);border:var(--bd);box-shadow:var(--sh)}
.bbtn:hover{background:var(--coral);color:var(--ink)}
.related{max-width:44rem;margin-bottom:clamp(48px,7vw,96px)}
.related h2{font-size:1.6rem;margin-bottom:1rem}
.related ul{list-style:none;padding:0;margin:0;border-top:3px solid var(--ink)}
.related li{border-bottom:3px solid var(--ink)}
.related a{display:block;padding:1rem 0;text-decoration:none;font-family:var(--f-display);font-weight:700;font-size:1.15rem}
.related a span{display:block;font-family:var(--f-mono);font-weight:500;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-bottom:.25rem}
.related a:hover{color:var(--blue)}

.bfoot{background:var(--ink);color:#c9cac2;padding-block:48px;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.04em}
.bfoot__brand{font-family:var(--f-display);font-weight:800;font-size:clamp(2rem,6vw,3.6rem);color:var(--paper);margin:0 0 1rem;letter-spacing:-.02em}
.bfoot a{color:var(--paper)}
.bfoot a:hover{color:var(--lime)}