:root {
  --public-site-gutter: clamp(1rem, 4vw, 2.5rem);
  --public-site-content-max: 1200px;
}

body.public-site-framed {
  min-width: 320px;
  overflow-x: clip;
}

body.public-site-framed :where(header, nav, main, footer, section, article) {
  box-sizing: border-box;
  min-width: 0;
}

.public-site-header,
.public-site-main,
.public-site-footer {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.public-site-frame,
body.public-site-framed > section > [class*="-inner"],
body.public-site-framed main > section > [class*="-inner"] {
  box-sizing: border-box;
  width: min(calc(100% - var(--public-site-gutter) - var(--public-site-gutter)), var(--public-site-content-max));
  margin-inline: auto;
}

.public-site-footer > :not(.public-site-frame) {
  box-sizing: border-box;
  width: min(calc(100% - var(--public-site-gutter) - var(--public-site-gutter)), var(--public-site-content-max));
  margin-inline: auto;
}

body.public-site-framed :focus-visible {
  outline: 3px solid var(--vp-amber, #d4a017);
  outline-offset: 3px;
}