:root{
  --bg: #f6f8fb;
  --panel: #ffffff;
  --ink: #1f2937;
  --muted: #6b7280;
  --accent: #2563eb;
}

body{background:var(--bg); color:var(--ink);}
#logo img{height:34px; width:auto; display:block;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

.site-header{background:var(--panel); border-bottom:1px solid rgba(0,0,0,.06);}
.header-row{display:flex; gap:.75rem; align-items:center; padding:.75rem 0;}
.title-block{min-width:0;}
.site-title{font-weight:700; line-height:1.1;}
.tagline{color:var(--muted); font-size:.9rem;}

.layout{display:grid; grid-template-columns: 260px minmax(0, 1fr) 320px; gap:1rem; padding:1rem; max-width:1200px; margin:0 auto;}
.nav-pane, .info-pane{position:sticky; top:0; align-self:start; height:calc(100vh - 90px); overflow:auto; background:var(--panel); border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:1rem;}
.main-pane .content-wrap{background:var(--panel); border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:1.2rem;}

@media (max-width: 1100px){
  .layout{grid-template-columns: 240px minmax(0, 1fr);}
  .info-pane{display:none;}
}
@media (max-width: 860px){
  .layout{grid-template-columns: 1fr;}
  .nav-pane{position:fixed; left:0; top:60px; bottom:0; width:min(85vw, 320px); transform:translateX(-110%); transition:transform .2s ease; z-index:50;}
  .nav-pane.is-open{transform:translateX(0);}
}

#footer{border-top:1px solid rgba(0,0,0,.06); background:var(--panel);}
#footer .container{max-width:1200px; margin:0 auto; padding:1.2rem;}