/* Basic, clean layout */
:root {
    --brand: #0d6efd;
}
.container {
    margin-inline: auto;
    max-width: var(--container-max, 1200px);
    padding: 1rem;
}
.site-header, .site-footer {
    background: var(--brand);
    color: #fff;
}
.site-title { color: #fff; text-decoration: none; font-weight: 700; }
.grid {
    display: grid;
    grid-template-columns: var(--col-left) var(--col-main) var(--col-right);
    gap: 1rem;
}
@media (max-width: 900px) {
    .grid { grid-template-columns: var(--col-left) var(--col-main) var(--col-right); }
    .sidebar-left, .sidebar-right { order: 2; }
    .main-area { order: 1; }
}
.skip-link {
    position: absolute; left: -9999px; top: auto;
}
.skip-link:focus {
    left: 1rem; top: 1rem; background:#000; color:#fff; padding:.5rem 1rem; z-index:1000;
}


/* 3-column desktop grid */
.grid { grid-template-columns: var(--col-left) var(--col-main) var(--col-right); }
.sidebar-left { min-width: 0; }
.sidebar-right { min-width: 0; }
.main-area { min-width: 0; }