/* Carbon Design System tokens (White theme) */
:root{
  --nav-bg:#161616;
  --nav-hover:#333333;
  --nav-text:#f4f4f4;
  --nav-text-muted:#a8a8a8;
  --bg:#ffffff;
  --ink:#161616;
  --ink-soft:#525252;
  --link:#0f62fe;
  --link-hover:#0043ce;
  --border:#e0e0e0;
  --hover-ui:#f4f4f4;
  --nav-width:256px;

  /* Category accents (Carbon tag palette) */
  --acc-architecture:#0f62fe; /* blue 60 */
  --acc-integration:#8a3ffc;  /* purple 60 */
  --acc-devops:#007d79;       /* teal 60 */
  --acc-ai:#d02670;           /* magenta 60 */
}
.cat-architecture{--accent:var(--acc-architecture)}
.cat-integration{--accent:var(--acc-integration)}
.cat-devops{--accent:var(--acc-devops)}
.cat-ai{--accent:var(--acc-ai)}
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5;
}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover);text-decoration:underline}

.top-accent{
  height:4px;width:100%;
  background:linear-gradient(90deg, var(--acc-architecture), var(--acc-integration), var(--acc-devops), var(--acc-ai));
}

/* ---- Top bar (mobile only) ---- */
.topbar{
  display:none;align-items:center;gap:12px;height:48px;padding:0 16px;
  background:var(--nav-bg);color:var(--nav-text);
}
.topbar button{
  background:none;border:none;color:var(--nav-text);cursor:pointer;padding:8px;
  display:flex;align-items:center;justify-content:center;
}
.topbar .topbar-title{font-size:14px;font-weight:600}

/* ---- Side nav (Carbon UI Shell) ---- */
.shell{display:flex;min-height:100vh}
.side-nav{
  width:var(--nav-width);flex:0 0 var(--nav-width);background:var(--nav-bg);
  padding:16px 0;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.brand{
  display:flex;align-items:center;gap:10px;padding:8px 16px 20px;
  color:var(--nav-text);font-weight:700;font-size:16px;
  border-bottom:1px solid #393939;margin-bottom:12px;cursor:pointer;
}
.brand:hover{color:#fff;text-decoration:none}
.brand svg{flex:0 0 auto}
.brand-logo{
  width:28px;height:28px;flex:0 0 auto;border-radius:6px;object-fit:cover;
  background:#fff;
}

.nav-link{
  display:block;padding:12px 16px;color:var(--nav-text);font-size:14px;font-weight:400;
  cursor:pointer;border-left:3px solid transparent;
}
.nav-link:hover{background:var(--nav-hover);color:#fff;text-decoration:none}
.nav-link.active{border-left-color:var(--link);background:var(--nav-hover);color:#fff;font-weight:600}

.nav-category{border-left:3px solid transparent;transition:border-color .15s ease}
.nav-category.open{border-left-color:var(--accent, var(--link))}
.nav-category-toggle{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:12px 16px;background:none;border:none;color:var(--nav-text);
  font-family:inherit;font-size:14px;cursor:pointer;text-align:left;
}
.nav-category-toggle:hover{background:var(--nav-hover);color:#fff}
.nav-category-toggle svg{transition:transform .15s ease;flex:0 0 auto}
.nav-category.open .nav-category-toggle svg{transform:rotate(90deg);fill:var(--accent, var(--link))}

.nav-category-children{
  max-height:0;overflow:hidden;transition:max-height .2s ease;
}
.nav-category.open .nav-category-children{max-height:400px}
.nav-category-children a{
  display:block;padding:10px 16px 10px 40px;font-size:13.5px;color:var(--nav-text-muted);
}
.nav-category-children a:hover{background:var(--nav-hover);color:#fff;text-decoration:none}
.nav-category-empty{
  padding:10px 16px 10px 40px;font-size:13px;color:#6f6f6f;font-style:italic;
}

/* ---- Content ---- */
.content{
  flex:1;min-width:0;padding:48px 40px;max-width:1100px;
  display:flex;flex-direction:column;min-height:100vh;
}

h2.section-title{
  font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);
  margin:0 0 16px;font-weight:600;
}

.post-list{display:flex;flex-direction:column;gap:16px}
.post-card{
  display:block;border:1px solid var(--border);border-left:3px solid var(--accent, var(--link));
  padding:20px;transition:background .15s ease;
}
.post-card:hover{background:var(--hover-ui);text-decoration:none}
.post-card .eyebrow{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--accent, var(--link))}
.post-card h3{margin:6px 0 6px;font-size:18px;color:var(--ink)}
.post-card p{margin:0;font-size:14px;color:var(--ink-soft);max-width:70ch}

.copyright{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--border);
  text-align:right;font-size:12.5px;color:var(--ink-soft);
}

/* ---- Responsive ---- */
@media (max-width:768px){
  .topbar{display:flex}
  .side-nav{
    position:fixed;left:0;top:48px;height:calc(100vh - 48px);
    transform:translateX(-100%);transition:transform .2s ease;z-index:50;
  }
  .side-nav.open{transform:translateX(0)}
  .shell{flex-direction:column}
  .content{padding:28px 20px}
  .content h1{font-size:26px}
}