:root {
  --site-dock-height: clamp(70px, 7vw, 84px);
  --site-theme-transition-duration: 0.45s;
}

html {
  scroll-padding-bottom: calc(var(--site-dock-height) + 24px);
}

body {
  padding-bottom: var(--site-dock-height);
}

body::after {
  content: "";
  position: fixed;
  z-index: 90;
  inset: auto 0 0;
  height: var(--site-dock-height);
  background: var(--bg, #fbfbf9);
  pointer-events: none;
  transition: background-color var(--site-theme-transition-duration) ease;
}

.footer-links,
.copyright,
.utilities {
  z-index: 100 !important;
}

@media (max-width: 760px) {
  :root {
    --site-dock-height: 74px;
  }

  /* Mobile keeps the dock deliberately quiet: contact links and the colour
     theme remain, while live media/time utilities are neither visible nor
     available to collide with the page edge. */
  .utilities .utility:has(#music-toggle),
  .utilities .utility:has(#clock-toggle) {
    display: none !important;
  }

  .footer-links,
  .utilities {
    background: var(--bg, #fbfbf9);
    transition: background-color var(--site-theme-transition-duration) ease;
  }
}