/* dosewise sticky header test (2026-10-06), loaded only by /dosewise/test/ after motion.css. */
:root{--sticky-bg:var(--paper);--sticky-line:var(--line)}
/* The bar keeps its full height at the top of the page; once scrolled it condenses to
   3.75rem and gains a translucent background that bleeds to the window edges. The pinned
   phone starts under it instead of at the very top. */
html{overflow-x:clip;scroll-padding-top:4.75rem}
.site-header{position:sticky;top:0;z-index:20;transition:height 260ms cubic-bezier(.22,1,.36,1)}
.site-header::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:color-mix(in srgb,var(--sticky-bg) 82%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 var(--sticky-line);opacity:0;transition:opacity 220ms ease}
.site-header.is-stuck{height:3.75rem}
.site-header.is-stuck::before{opacity:1}
.stage{top:3.75rem;height:calc(100svh - 3.75rem)}
@media (prefers-reduced-motion:reduce){.site-header,.site-header::before{transition:none}}
.motion-ready .stage-device{--device-w:min(340px,calc((100svh - 19.25rem) * .4719))}
/* In-page links like "Sound familiar?" glide to their section instead of jumping. */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}