/* Shared by the server shell, footer, and full-width action bars. Loaded in
   <head> so page geometry is stable before Vue or Bootstrap loads.
   Keep gutters here; wrappers inside the shell should not add another set.
   Narrow reading/form layouts can still set their own inner max-width. */
:root {
  --site-container-max-width: 82.5rem;
  --site-gutter: 1rem;
}

@media (min-width: 48rem) {
  :root {
    --site-gutter: 1.5rem;
  }
}

.site-container {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: var(--site-container-max-width);
  margin-inline: auto;
  padding-inline: var(--site-gutter);
}