/* Dosta — page layout. */
.shell { min-height: 100vh; display: grid; grid-template-columns: 220px minmax(0, 1fr); }

.nav {
  position: sticky; top: 0; align-self: start;
  height: 100vh; padding: 28px 14px;
  border-right: 1px solid var(--line);
}
.brand {
  display: block; margin: 0 0 24px 10px;
  color: var(--ink); font-size: var(--text-l); font-weight: 700; text-decoration: none;
}
.nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav-list a {
  display: flex; align-items: center; min-height: 44px; padding: 8px 12px;
  border-radius: var(--radius); color: var(--ink-soft); font-weight: 700; text-decoration: none;
}
.nav-list a:hover { color: var(--ink); background: var(--surface); }
.nav-list a[aria-current="page"] { color: var(--fern); background: var(--fern-tint); }

.page { min-width: 0; padding: 40px 32px 96px; }
.main { outline: none; }
.banners { max-width: var(--wide); margin: 0 auto 24px; }
.banners:empty { display: none; }
.page-narrow { max-width: var(--reading); margin: 0 auto; }
.page-wide { max-width: var(--wide); margin: 0 auto; }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .nav {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 20;
    height: auto; padding: 0;
    border-right: 0; border-top: 1px solid var(--line);
    background: var(--surface);
  }
  .brand { display: none; }
  .nav-list { grid-auto-flow: column; grid-auto-columns: max-content; gap: 0; overflow-x: auto; }
  .nav-list a { border-radius: 0; padding: 10px 14px; font-size: var(--text-s); }
  .page { padding: 24px 18px 110px; }
}