/* Mandatory shared page edges. Keep this after component/theme styles. */
#shell{--page-max-width:1184px;--page-gutter:32px;--page-width:min(var(--page-max-width),calc(100% - var(--page-gutter) - var(--page-gutter)))}
#shell .site-header,#shell .main,#shell .site-footer{width:var(--page-width);max-width:var(--page-max-width);box-sizing:border-box}
#shell .site-header{margin-inline:auto}
#shell .header-inner{width:100%;max-width:none;margin:0;padding:12px 0;box-sizing:border-box}
#shell .main{margin-inline:auto}
#shell .site-footer{left:50%;right:auto;transform:translateX(-50%);margin:0;padding:16px 0 calc(16px + env(safe-area-inset-bottom))}
/* Keep the mascot itself inside the same left edge as the wordmark group. */
#shell .brand{padding-left:78px}
#shell .brand .brand-carby{left:0}
@media(max-width:760px){#shell{--page-gutter:20px}#shell .header-inner{padding:12px 0}}
@media(max-width:480px){#shell .brand{padding-left:62px}}