/* Edge-to-edge background; meaningful content remains inside the iPhone safe area. */
:root {
  --rebernium-safe-top: env(safe-area-inset-top, 0px);
  --rebernium-safe-right: env(safe-area-inset-right, 0px);
  --rebernium-safe-bottom: env(safe-area-inset-bottom, 0px);
  --rebernium-safe-left: env(safe-area-inset-left, 0px);
}
html {
  min-height: 100%;
  background-color: #060912;
  scroll-padding-top: calc(96px + var(--rebernium-safe-top));
}
body,
#root,
.site {
  min-height: 100vh;
  min-height: 100svh;
  background-color: #060912;
}
/* The decorative layers also cover the space revealed when Safari retracts its bars. */
.ambient-field,
.molecular-backdrop {
  top: 0;
  bottom: auto;
  width: 100%;
  height: 100vh;
  height: 100lvh;
}
.molecular-canvas {
  width: 100%;
  height: 100%;
}
.site-header {
  padding-top: calc(14px + var(--rebernium-safe-top));
  padding-left: max(24px, var(--rebernium-safe-left));
  padding-right: max(24px, var(--rebernium-safe-right));
}
.section-shell {
  max-width: calc(
    100% - max(24px, var(--rebernium-safe-left)) - max(24px, var(--rebernium-safe-right))
  );
}
.hero {
  padding-top: calc(126px + var(--rebernium-safe-top));
}
.footer-credit {
  padding-bottom: calc(12px + var(--rebernium-safe-bottom));
}
@media (max-width: 980px) {
  html {
    scroll-padding-top: calc(82px + var(--rebernium-safe-top));
  }
  .site-header {
    padding-top: calc(10px + var(--rebernium-safe-top));
    padding-left: max(14px, var(--rebernium-safe-left));
    padding-right: max(14px, var(--rebernium-safe-right));
  }
  .mobile-nav {
    top: calc(78px + var(--rebernium-safe-top));
    left: max(14px, var(--rebernium-safe-left));
    right: max(14px, var(--rebernium-safe-right));
    max-height: calc(100vh - 92px - var(--rebernium-safe-top) - var(--rebernium-safe-bottom));
    max-height: calc(100dvh - 92px - var(--rebernium-safe-top) - var(--rebernium-safe-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .hero {
    padding-top: calc(122px + var(--rebernium-safe-top));
  }
}
@media (max-width: 720px) {
  .section-shell {
    max-width: calc(
      100% - max(14px, var(--rebernium-safe-left)) - max(14px, var(--rebernium-safe-right))
    );
  }
  .hero {
    padding-top: calc(110px + var(--rebernium-safe-top));
  }
}