/* optimize blog — shares the main site's design system (IBM Plex + violet) */
:root{
  --bg:#f6f5fa; --bg-elev:#fcfbff; --card:#fff;
  --ink:#14131a; --ink-2:#4a4854; --ink-3:#706d7c;
  --rule:#1413101a; --rule-strong:#14131033;
  --accent:#5c1eec; --accent-ink:#2b0e72; --accent-wash:#ede8fd; --accent-line:#d9cbfa;
  --gold:#b08735; --good:#1e6b4a; --bad:#b3324a;
  --dark:#0a0a14; --dark-2:#14142a;
  --radius:14px; --radius-sm:8px; --maxw:1240px;
  --f-display:"IBM Plex Serif","Iowan Old Style",Georgia,serif;
  --f-sans:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --shadow-card:0 1px 2px rgba(20,19,26,.05),0 14px 40px -18px rgba(92,30,236,.16);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;font-size:15px;line-height:1;text-decoration:none;white-space:nowrap;
  padding:15px 26px;border-radius:10px;border:1px solid transparent;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease,background-color .18s ease;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn--primary{background:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(43,14,114,.3),0 10px 26px -10px rgba(92,30,236,.55)}
.btn--primary:hover{background:#4c14cd;transform:translateY(-1px);box-shadow:0 2px 4px rgba(43,14,114,.3),0 16px 34px -12px rgba(92,30,236,.6)}
.btn--sm{padding:11px 18px;font-size:14px}

/* ---------- nav (matches main site) ---------- */
.nav{
  position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg-elev) 88%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);
}
.nav__in{max-width:var(--maxw);margin:0 auto;padding:0 24px;height:68px;display:flex;align-items:center;gap:32px}
.logo{display:inline-flex;align-items:center;border-radius:6px}
.logo:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.logo-img{height:30px;width:auto;display:block}
.nav__links{display:flex;gap:26px;margin:0 auto}
.nav__links a{font-size:14.5px;font-weight:500;color:var(--ink-2);text-decoration:none;padding:6px 2px;border-radius:6px;transition:color .15s ease}
.nav__links a:hover,.nav__links a[aria-current=page]{color:var(--ink)}
.nav__links a:focus-visible,.nav__login:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.nav__right{display:flex;align-items:center;gap:20px}
.nav__login{font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:none;padding:6px 2px;border-radius:6px}
.nav__login:hover{color:var(--accent)}
.nav__login--menu{display:none}
.nav__burger{
  display:none;width:40px;height:40px;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  background:transparent;border:1px solid var(--rule-strong);border-radius:8px;padding:0;cursor:pointer;
}
.nav__burger span{display:block;width:16px;height:2px;background:var(--ink);border-radius:2px;transition:transform .18s ease,opacity .18s ease}
.nav__burger:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.nav--open .nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav--open .nav__burger span:nth-child(2){opacity:0}
.nav--open .nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- blog index ---------- */
.bloghead{max-width:768px;margin:0 auto;padding:76px 24px 6px}
.eyebrow{font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.bloghead h1{font-family:var(--f-display);font-weight:600;font-size:clamp(36px,5.4vw,56px);letter-spacing:-.025em;line-height:1.04;margin:16px 0 0}
.bloghead .lede{color:var(--ink-2);font-size:18px;line-height:1.7;margin:18px 0 0;max-width:560px}
.postlist{max-width:768px;margin:0 auto;padding:26px 24px 20px}
.post{display:block;text-decoration:none;color:inherit;padding:30px 0;border-top:1px solid var(--rule)}
.post:first-child{border-top:0}
.pmeta{font-family:var(--f-mono);font-size:11.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.ptitle{font-family:var(--f-display);font-weight:600;font-size:clamp(22px,2.7vw,28px);letter-spacing:-.02em;line-height:1.14;margin-top:12px;transition:color .15s ease}
.post:hover .ptitle{color:var(--accent)}
.pblurb{color:var(--ink-2);font-size:16px;line-height:1.65;margin:11px 0 0;max-width:64ch}

/* ---------- article ---------- */
.hero{max-width:768px;margin:0 auto;padding:56px 24px 0}
.crumb{font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.crumb a{color:var(--ink-3);text-decoration:none}
.crumb a:hover{color:var(--accent)}
.hero h1{font-family:var(--f-display);font-weight:600;font-size:clamp(32px,4.7vw,47px);line-height:1.06;letter-spacing:-.025em;margin:16px 0 14px;text-wrap:balance}
.meta{font-family:var(--f-mono);font-size:12.5px;color:var(--ink-3);letter-spacing:.03em}
.heroband{
  margin-top:32px;border-radius:var(--radius);padding:42px 32px;text-align:center;
  background:var(--accent-wash);border:1px solid var(--accent-line);color:var(--accent-ink);
}
.heroband .big{font-family:var(--f-display);font-weight:600;font-size:clamp(20px,3vw,30px);letter-spacing:-.02em;line-height:1.2}
.heroband .sub{font-size:14.5px;font-weight:500;color:var(--accent);opacity:.85;margin-top:10px}

article{max-width:680px;margin:0 auto;padding:36px 24px 20px;font-size:17.5px;line-height:1.75;color:var(--ink-2)}
article h2{font-family:var(--f-display);font-weight:600;font-size:clamp(22px,2.5vw,27px);letter-spacing:-.02em;color:var(--ink);margin:42px 0 12px;line-height:1.18}
article p{margin:0 0 18px}
article ul{margin:0 0 18px;padding-left:20px}
article li{margin-bottom:9px}
article li::marker{color:var(--accent)}
article b{color:var(--ink);font-weight:600}
article a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
article a:hover{color:var(--accent-ink)}
.callout{background:var(--accent-wash);border:1px solid var(--accent-line);border-radius:var(--radius);padding:20px 22px;margin:26px 0;font-size:16px;line-height:1.65;color:var(--ink)}
.callout.green{background:#e3f0e8;border-color:#bfe0cd}
.statline{font-family:var(--f-mono);font-size:14px;font-weight:500;color:var(--good);margin:26px 0;padding-left:16px;border-left:3px solid var(--good);line-height:1.6}
.sources{font-family:var(--f-mono);font-size:12.5px;color:var(--ink-3);border-top:1px solid var(--rule);margin-top:40px;padding-top:16px;line-height:1.95}
.sources a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.sources a:hover{color:var(--accent)}

/* ---------- article CTA ---------- */
.ctabox{max-width:680px;margin:22px auto 0;padding:0 24px}
.ctabox-inner{background:var(--dark);color:#fff;border-radius:18px;padding:34px 32px;position:relative;overflow:hidden}
.ctabox-inner::before{content:"";position:absolute;top:-60%;right:-10%;width:340px;height:340px;background:radial-gradient(circle,rgba(92,30,236,.55),transparent 68%);pointer-events:none}
.ctabox-inner .t{position:relative;font-family:var(--f-display);font-weight:600;font-size:22px;letter-spacing:-.01em}
.ctabox-inner .s{position:relative;font-size:14.5px;color:#b6b3c9;margin-top:8px;line-height:1.6;max-width:46ch}
.cta-pill{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;font-weight:600;font-size:15px;border-radius:10px;padding:14px 24px;
  text-decoration:none;box-shadow:0 10px 26px -10px rgba(92,30,236,.6);transition:transform .18s ease,background-color .18s ease;
}
.cta-pill:hover{background:#4c14cd;transform:translateY(-1px)}

/* ---------- keep reading ---------- */
.more{max-width:680px;margin:46px auto 0;padding:0 24px}
.more .lbl{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.more a{display:block;font-family:var(--f-display);font-weight:600;font-size:18px;letter-spacing:-.015em;text-decoration:none;color:var(--ink);margin-top:14px}
.more a:hover{color:var(--accent)}

/* ---------- footer (matches main site) ---------- */
.footer{background:var(--dark);color:#fff;margin-top:84px;padding:64px 0 34px}
.footer__top{display:flex;justify-content:space-between;gap:40px;align-items:flex-start;flex-wrap:wrap}
.footer .logo-img{height:32px;filter:invert(1)}
.footer__tag{margin-top:12px;color:#8f8ca6;font-size:14px;max-width:300px;line-height:1.7}
.footer__links{display:flex;gap:56px;flex-wrap:wrap}
.footer__col{display:flex;flex-direction:column;gap:12px}
.footer__col b{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;color:#8f8ca6;text-transform:uppercase;margin-bottom:4px}
.footer__col a{color:#c9c6da;text-decoration:none;font-size:14px;border-radius:4px}
.footer__col a:hover{color:#fff}
.footer__bottom{
  margin-top:52px;padding-top:24px;border-top:1px solid #ffffff1f;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:12px;color:#8f8ca6;
}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------- responsive ---------- */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms !important}}
@media (max-width:860px){
  .nav__links{
    display:none;position:absolute;top:100%;left:0;right:0;margin:0;flex-direction:column;gap:0;
    padding:6px 24px 14px;background:var(--bg-elev);border-bottom:1px solid var(--rule);
    box-shadow:0 18px 40px -22px rgba(20,19,26,.25);
  }
  .nav--open .nav__links{display:flex}
  .nav__links a{padding:13px 2px;font-size:16px;border-top:1px solid var(--rule)}
  .nav__links a:first-child{border-top:0}
  .nav__burger{display:inline-flex}
  .nav__login{display:none}
  .nav__login--menu{display:block;font-size:16px}
  .nav__in{gap:16px;justify-content:space-between}
}
@media (max-width:520px){
  .footer__top{flex-direction:column;gap:28px}
  .heroband{padding:32px 22px}
  .ctabox-inner,.bloghead,.postlist{}
}