/* Only the fixed toolbar changes geometry; the document never reflows with it. */
.scroll-header {
  --scroll-header-progress:0;
  --scroll-header-height:74px;
  --scroll-header-gutter:var(--gutter,32px);
  --scroll-header-inset:max(12px,calc((100vw - 640px) / 2));
  --scroll-header-top:12px;
  --scroll-header-ink:#171719;
  --scroll-header-surface:rgba(241,242,243,.9);
  --scroll-header-line:rgba(23,23,25,.07);
  position:fixed;
  z-index:50;
  top:calc(env(safe-area-inset-top,0px) + var(--scroll-header-top) * var(--scroll-header-progress));
  left:calc(var(--scroll-header-inset) * var(--scroll-header-progress));
  right:calc(var(--scroll-header-inset) * var(--scroll-header-progress));
  bottom:auto;
  width:auto;
  min-height:0;
  height:calc(var(--scroll-header-height) + (56px - var(--scroll-header-height)) * var(--scroll-header-progress));
  padding:0 calc(var(--scroll-header-gutter) + (20px - var(--scroll-header-gutter)) * var(--scroll-header-progress));
  border-radius:999px;
  background:transparent;
  color:var(--scroll-header-ink);
  isolation:isolate;
  pointer-events:none;
  transition:none;
}
.page-header.scroll-header { --scroll-header-height:76px; }
html[data-theme="dark"] .scroll-header {
  --scroll-header-ink:#f3f3f1;
  --scroll-header-surface:rgba(43,44,47,.88);
  --scroll-header-line:rgba(255,255,255,.07);
}
.scroll-header::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  border:1px solid var(--scroll-header-line);
  border-radius:inherit;
  background:var(--scroll-header-surface);
  box-shadow:0 4px 18px rgba(0,0,0,.055);
  opacity:var(--scroll-header-progress);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  pointer-events:none;
}
.scroll-header > * { pointer-events:auto; }
.scroll-header :is(.case-menu,.case-theme,.case-mail,.page-mail,[data-inner-menu-toggle]) {
  background-color:color-mix(in srgb,var(--control,#f1f1f1) calc((1 - var(--scroll-header-progress)) * 100%),transparent);
}
.scroll-header :is(button,.case-mail,.page-mail):is(:hover,:focus-visible) {
  background-color:color-mix(in srgb,var(--scroll-header-ink) 8%,transparent);
}
/* Keep the existing document handoff geometry above a moving project image. */
html[data-case-entering] .scroll-header,
body.case-departing .scroll-header {
  top:0;
  left:0;
  right:0;
  height:var(--scroll-header-height);
  padding-inline:var(--scroll-header-gutter);
  border-radius:0;
}
html[data-case-entering] .scroll-header::before,
body.case-departing .scroll-header::before { opacity:0; }
@media (max-width:767px) {
  .scroll-header {
    --scroll-header-height:65px;
    --scroll-header-gutter:20px;
    --scroll-header-inset:12px;
    --scroll-header-top:8px;
    padding-inline:calc(var(--scroll-header-gutter) + (12px - var(--scroll-header-gutter)) * var(--scroll-header-progress));
  }
  .page-header.scroll-header { --scroll-header-height:66px; --scroll-header-gutter:18px; }
}