/* Collection ↔ project transitions stay in the same document (work-transition.js). */
body:has([data-work-collection]),body:has([data-project-detail]) { background: var(--hb-color-paper); }
.hb-project__back { position: fixed; right: 24px; bottom: 24px; z-index: 10; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--hb-color-paper); color: var(--hb-color-ink); box-shadow: 0 4px 24px #10211917; transition: background .25s,color .25s; }
.hb-project__back:hover { background: var(--hb-color-forest); color: var(--hb-color-paper); }
.hb-project__back svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.3; }
.hb-work-morph { position: fixed; z-index: 20; overflow: hidden; border-radius: 8px; transform-origin: 0 0; background: transparent; pointer-events: none; will-change: transform; }
.hb-work-morph>img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 58% center; }
.is-work-navigating { overflow: hidden; overflow-anchor: none; scroll-behavior: auto; }
.is-work-navigating main { pointer-events: none; }
@media (max-width:760px) { .hb-project__back { right: 20px; bottom: 20px; width: 44px; height: 44px; } }

/* Hold the incoming left pane until its first animation frame, without hiding the shared image. */
.hb-project.is-work-entering .hb-project__summary>*,
.hb-project.is-work-entering .hb-project__back,
.hb-work.is-work-entering .hb-work__aside>*,
.hb-work.is-work-entering .hb-work__scroll,
.hb-work.is-work-entering .hb-work__slide.is-active .hb-work__caption,
.hb-work.is-work-entering .hb-work__slide.is-active .hb-work__discover { opacity: 0; }
@media (min-width:761px) {
  html:has([data-work-collection]),html:has([data-project-detail]) { scrollbar-gutter: stable; }
}