/* Purpose: Container, band rhythm and the breakpoint ladder that re-scales the layout tokens.
   Mobile first — base values are the smallest viewport, every step overrides upward. */

.shell {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.band {
  padding: var(--band-pad) 0;
}

@media (min-width: 561px) {
  :root {
    --band-pad: 60px;
    --gutter:   20px;
  }
}

@media (min-width: 821px) {
  :root {
    --band-pad: 76px;
    --gutter:   24px;
  }
}

@media (min-width: 1081px) {
  :root {
    --band-pad: 96px;
    --gutter:   24px;
  }
}