/* The fixed mobile header sits outside the page's scrollable area. */
@media (max-width: 999px) {
  html {
    height: 100%;
    overflow: hidden;
    scrollbar-gutter: auto;
    background: #000;
  }

  body {
    height: calc(100vh - 65px);
    height: calc(100dvh - 65px);
    min-height: 0;
    margin: 65px 0 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
  }

  #masthead { padding-bottom: 0; }
  #topheadline { top: 0; left: 0; width: 100vw; }
  .sidenav { height: calc(100vh - 65px); height: calc(100dvh - 65px); }
}

/* The gutter has the same black background even on a short desktop page. */
@media (min-width: 1000px) {
  html {
    background: #000;
    overflow-y: scroll;
    scrollbar-gutter: stable;
    scrollbar-color: #4a4a4a #000;
  }
  html::-webkit-scrollbar { background: #000; }
  html::-webkit-scrollbar-thumb { background: #4a4a4a; border-radius: 5px; }
  html.hb-no-scroll { scrollbar-color: #000 #000; }
  html.hb-no-scroll::-webkit-scrollbar,
  html.hb-no-scroll::-webkit-scrollbar-track,
  html.hb-no-scroll::-webkit-scrollbar-thumb,
  html.hb-no-scroll body::-webkit-scrollbar,
  html.hb-no-scroll body::-webkit-scrollbar-track,
  html.hb-no-scroll body::-webkit-scrollbar-thumb { background: #000 !important; }
}