.depth-section { position:relative; }
html,
body { overscroll-behavior-y:none; overflow-x:clip; }
html { overflow-x:clip; }
body.depth-ready { overscroll-behavior:none; }
.depth-section::after { content:''; position:absolute; inset:2px; border:16px solid transparent; border-image:url('images/museum-architecture.webp') 190 180 135 180 / 24px 24px 18px 24px stretch; pointer-events:none; z-index:1; }
.depth-layer { position:fixed; inset:0; z-index:5; width:100%; height:100dvh; pointer-events:none; overflow:hidden; }
.depth-layer canvas { display:block; width:100%; height:100%; pointer-events:none; }
.depth-ready .depth-section::after { display:none; }
.depth-ready .museum-fragments,.depth-ready .room-collage,.depth-ready .normal-curiosity { visibility:hidden; }
.depth-ready .reading-vignette img { visibility:hidden; }
.depth-motion-toggle { position:fixed; right:16px; bottom:16px; z-index:60; width:44px; height:44px; border:1px solid #baab83; border-radius:50%; display:grid; place-items:center; background:#152d27; color:#f1e6c8; cursor:pointer; box-shadow:0 2px 12px #0003; }
.depth-motion-toggle svg { width:18px; height:18px; }
.depth-motion-toggle:hover { background:#3c4938; }
.depth-motion-toggle:focus-visible { outline:3px solid #b75928; outline-offset:4px; }
body:has(#museum-title) > .archive-header { position:sticky; top:0; z-index:60; }
.archive-header > .header-links { margin-left:auto; }
.archive-header > .depth-motion-toggle { position:static; flex-shrink:0; margin-left:8px; box-shadow:none; }
body:has(#museum-title) main > .view-mode-bar { position:relative; z-index:6; }
body:has(#museum-title) .museum { padding-top:24px; padding-bottom:32px; }
.record-dialog > .depth-layer { z-index:4; }
.record-navigation { z-index:10; }
.depth-paused [data-drift],.depth-paused .museum-fragment { transform:none!important; }
@media(max-width:600px) {
  body:has(#museum-title) .museum { padding-top:16px; }
  .depth-section::after { border-image-width:10px 8px 10px 8px; inset:1px; }
  /* Use the positioned bitmap ornaments as a dependable mobile fallback. */
  .depth-ready .museum-fragments, .depth-ready .room-collage, .depth-ready .normal-curiosity { visibility:visible; }
  .depth-motion-toggle { right:10px; bottom:10px; width:40px; height:40px; }
}
@media(prefers-reduced-motion:reduce) { .depth-motion-toggle { display:none; } }