/* 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);
}


/* Mobile: only the final navigation row stays at the top while reading.
   The masthead remains in document flow, so returning to the top never covers
   the first heading. CSS sticky also survives reload/history scroll restoration;
   there is no scroll-direction state or forced scroll reset. */
@media(max-width:760px){
 :root{--site-header-collapse:0px}
 body > .site-header{position:sticky;top:calc(-1 * var(--site-header-collapse, 0px))}
 .post-breadcrumb{position:relative;top:auto}
}