/**
 * KoreAves surface shell
 *
 * Every top-level surface uses the same canvas, horizontal inset, vertical
 * rhythm, and mobile safe area. Page-specific CSS begins below this shell;
 * it must not redefine the application frame.
 */

.ka-surface-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: calc(var(--ka-width-atlas-canvas) + var(--ka-space-40));
  margin: 0 auto;
  padding: var(--ka-space-24) var(--ka-space-20) var(--ka-space-48);
}

@media (max-width: 768px) {
  .ka-surface-shell {
    max-width: 100%;
    padding: var(--ka-space-16) var(--ka-space-12) var(--ka-space-32);
  }
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .ka-surface-shell {
    padding-bottom: calc(var(--ka-space-48) + env(safe-area-inset-bottom));
  }
}