/* Navigation uses the outer frame; content sits one responsive inset inside it. */
:root {
  --page-max: 1440px;
  --frame-edge: 24px;
  --content-inset: 24px;
  --accent: #bdc314;
}
@media (max-width: 1100px) {
  :root {
    --frame-edge: 24px;
    --content-inset: 20px;
  }
}
@media (max-width: 760px) {
  :root {
    --frame-edge: 20px;
    --content-inset: 16px;
  }
}
@media (max-width: 520px) {
  :root {
    --frame-edge: 16px;
    --content-inset: 12px;
  }
}
.bottom-dock {
  --dock-side: var(--frame-edge);
}
.about-top.frame {
  max-width: var(--page-max);
  padding-inline: var(--frame-edge);
}
main.frame {
  max-width: var(--page-max);
  padding-inline: calc(var(--frame-edge) + var(--content-inset));
}
.case-layout {
  max-width: var(--page-max);
  padding-inline: var(--frame-edge);
}
.case-content {
  padding-inline: var(--content-inset);
}
@media (max-width: 900px) {
  .case-layout {
    margin-inline: auto;
  }
  .case-section-toggle,
  .case-toc {
    width: calc(100% - 2 * var(--frame-edge));
  }
}