.layout { display: flex; min-height: 100vh; background: var(--sage-50); max-width: 100vw; }
.main { flex: 1; margin-left: 240px; min-height: 100vh; overflow-x: hidden; max-width: calc(100vw - 240px); }

@media (max-width: 1024px) {
  .main { margin-left: 200px; max-width: calc(100vw - 200px); }
}

@media (max-width: 768px) {
  .main {
    margin-left: 0;
    max-width: 100vw;
    padding-bottom: 72px; /* space for mobile bottom nav */
  }
}