:root { --sidebar-w: 260px; --max: 1200px; --gap: 24px; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin:0; font:16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial; color:#111; background:#fff; }

.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { left:16px; top:16px; width:auto; height:auto; background:#eee; padding:8px 12px; }

.site-header { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid #eee; }
.site-title { text-decoration:none; color:inherit; font-weight:600; }
.nav-toggle { display:none; }

.shell { max-width: var(--max); margin:0 auto; display:grid; grid-template-columns: var(--sidebar-w) 1fr; gap: var(--gap); padding: 16px; }

.sidebar { position:sticky; top:16px; align-self:start; height: calc(100vh - 32px); overflow:auto; border-right:1px solid #eee; padding-right:12px; }
.nav { list-style: none; margin:0; padding:0; }
.nav-item a { display:block; padding:8px 6px; text-decoration:none; color:#222; border-radius:6px; }
.nav-item a:hover { background:#f4f4f5; }
.nav-item a.is-active { background:#111; color:#fff; }

.content { padding: 0 4px; min-height: 60vh; }
.content h1 { margin-top:0; }
.site-footer { margin-top: 32px; padding:16px; border-top:1px solid #eee; }

/* Responsive: collapse sidebar under 900px */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { display:none; border-right:0; padding-right:0; height:auto; position:static; }
  .nav-toggle { display:inline-flex; }
  .sidebar.open { display:block; border-top:1px solid #eee; margin-top:8px; padding-top:8px; }
}