/* Keep the shared fixed navbar at viewport width on every page. */
.navbar { width: 100vw; right: auto; box-sizing: border-box; }

/* Use an element scrollbar, which the fixed navbar can cover.
   A viewport scrollbar is browser chrome and always paints above page content. */
@media screen {
  html { height: 100%; overflow: hidden; }
  body { height: 100%; overflow-y: auto; overflow-x: hidden; }
}
@media print {
  html, body { height: auto; overflow: visible; }
}

/* Native scrollbars follow the site's light and dark palettes. */
html {
  --scrollbar-thumb: #966B5D;
  --scrollbar-track: #F1F1ED;
}
body.cta-active, body.plate-active {
  --scrollbar-thumb: #9A7B4F;
  --scrollbar-track: #14110D;
}
body, .deck, .mobile-menu {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
}
body::-webkit-scrollbar,
.deck::-webkit-scrollbar,
.mobile-menu::-webkit-scrollbar { width: 8px; height: 8px; }
body::-webkit-scrollbar-track,
.deck::-webkit-scrollbar-track,
.mobile-menu::-webkit-scrollbar-track { background: var(--scrollbar-track); }
body::-webkit-scrollbar-thumb,
.deck::-webkit-scrollbar-thumb,
.mobile-menu::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 0;
  border-radius: 0;
}
@media (forced-colors: active) {
  body, .deck, .mobile-menu { scrollbar-color: auto; }
}