/* Homepage only: paint the safe areas, but keep controls inside them. */
@media (max-width: 900px) {
  html,
  body,
  #Home {
    background-color: var(--homepage-edge-colour, #df0405);
  }

  #Home {
    height: 100vh;
    height: 100dvh;
    box-sizing: border-box;
    padding: 0;
  }

  #Hero-Container {
    position: absolute;
    inset: 0;
  }

  .Navigation-Island {
    top: calc(20px + env(safe-area-inset-top, 0px));
  }

  .Navigation-Island.show-menu {
    max-height: calc(100dvh - 40px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }

  .social-Button-Container {
    bottom: calc(15px + env(safe-area-inset-bottom, 0px));
  }
}