/* Shared horizontal rhythm for every public page. The original directory
   frame remains the base at tablet widths; large pages gain a little room
   without reaching the wider navigation frame. Backgrounds remain full width. */
:root {
  --site-shell-width: 100%;
  --site-shell-gutter: 15px;
  --site-header-width: 1440px;
  --site-header-gutter: clamp(24px, 2.5vw, 40px);
}

.container.site-shell-frame {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  padding-left: var(--site-shell-gutter);
  padding-right: var(--site-shell-gutter);
  width: var(--site-shell-width);
}

@media (min-width: 768px) {
  :root { --site-shell-width: 750px; }
}

@media (min-width: 992px) {
  :root { --site-shell-width: 970px; }
}

@media (min-width: 1200px) {
  :root { --site-shell-width: min(1280px, calc(100% - 30px)); }
}

/* The navigation needs more breathing room than editorial content. It keeps
   visible side margins while the pages remain on the directory's 1170px
   reading frame. */
@media (min-width: 1100px) {
  .container.site-header-inner.site-shell-frame {
    max-width: var(--site-header-width);
    padding-left: var(--site-header-gutter);
    padding-right: var(--site-header-gutter);
    width: 100%;
  }
}

/* Professional heroes deliberately paint edge to edge. Their inner shell uses
   the same axis as the navigation and the rest of the public site. */
.page-professional .container.site-main.site-shell-frame {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.page-professional .profile-shell {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  padding-left: var(--site-shell-gutter);
  padding-right: var(--site-shell-gutter);
  width: var(--site-shell-width);
}