/* Sticky site header — keeps masthead accessible while scrolling.
   z-index 10: above hero/WebGL (1-3) and post-breadcrumb (4),
   below music-player (30), live-activity (180), toast (200), dialogs. */

:root {
  --site-header-height: 96px; /* JS measures and overrides via ResizeObserver */
}

body > .site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--paper, #f6f5f0);
}

/* Override the existing scroll-padding-top: 32px from style.css */
html {
  scroll-padding-top: calc(var(--site-header-height, 96px) + 16px);
}

/* Post breadcrumb is sticky top:0 z-index:4 — push it below the header */
.post-breadcrumb {
  top: var(--site-header-height, 96px);
}