.scroll-depth{position:relative;margin-top:20svh;background:#fff;color:var(--blue);overflow:clip}
.depth-stop{position:absolute;left:0;right:0;display:flex;justify-content:center;align-items:center;min-height:60svh;padding:60px 110px 60px 28px}
.depth-stop>div{width:min(100%,520px)}
.depth-stop h2{font-family:var(--hand);font-size:clamp(34px,5vw,54px);font-weight:600;line-height:1.15;margin:0 0 20px;text-wrap:balance}
.depth-stop p{margin:0;line-height:1.8}
.scroll-depth.is-deep{color:white}
.depth-ruler{position:fixed;right:max(6px,env(safe-area-inset-right));top:0;bottom:0;z-index:5;width:90px;pointer-events:none;color:var(--blue)}
.depth-reading{position:absolute;right:28px;top:50%;transform:translateY(-50%);font-variant-numeric:tabular-nums;font-size:14px;font-weight:600;white-space:nowrap}
.depth-ticks{position:absolute;top:0;bottom:0;right:0;width:20px;border-right:1px solid currentColor;background:repeating-linear-gradient(to bottom,currentColor 0 1px,transparent 1px 19px);opacity:.4}
.depth-ruler.is-deep{color:white}
.depth-doodle{display:block;width:100px;height:65px;margin:0 0 24px;overflow:visible;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:depth-drift 4s ease-in-out infinite alternate}
@keyframes depth-drift{to{transform:translate(12px,-8px) rotate(-4deg)}}
@media(max-width:700px){.depth-stop{padding-left:26px;padding-right:112px}.depth-stop h2{font-size:36px}.depth-stop p{font-size:15px}}
@media(prefers-reduced-motion:reduce){.depth-doodle{animation:none}}
@media print{.scroll-depth{display:none}}

.depth-story-art{display:block;width:min(220px,100%);height:auto;margin:0 0 28px;overflow:visible;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;font-family:var(--hand)}
.depth-stamp{display:inline-block;margin-top:28px;padding:5px 18px;border:2px solid currentColor;font-family:var(--hand);font-size:28px;transform:rotate(-9deg)}
.depth-missing h2{font-family:var(--sans);font-size:17px;font-weight:400;line-height:1.6}
.depth-missing p{font-size:13px}
@media(prefers-reduced-motion:no-preference){
  .depth-carry{animation:depth-carry 7s ease-in-out infinite alternate}
  .depth-float{animation:depth-drift 4s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
}
@keyframes depth-carry{0%{transform:translateX(-16px)}25%{transform:translate(-6px,-3px)}50%{transform:translate(4px,0)}75%{transform:translate(14px,-3px)}100%{transform:translate(24px,0)}}

/* Rare photographs keep their full framing and load only near the viewport. */
.depth-photo-stop>div{width:min(100%,620px)}
.depth-photo{margin:0}
.depth-photo img{display:block;width:auto;height:auto;max-width:100%;max-height:70svh;margin:auto;object-fit:contain}
@media(max-width:700px){.depth-photo-stop{padding-left:16px;padding-right:86px}.depth-photo img{max-height:65svh}}