/* Portrait preview, uniform information and Wasabi cursors. */
.portrait,.intro-video{filter:blur(1.5px);transition:filter 220ms ease,opacity 450ms ease}
.about-home .portrait,.is-about-preview .portrait{filter:blur(0)}
.home.is-about-preview .stone{opacity:0;pointer-events:none}
.about-on-image[hidden]{display:none!important}
.face-target{border-radius:50%;clip-path:ellipse(50% 50% at 50% 50%)}
.about-on-image{font-family:var(--mono);font-size:calc(8px * var(--ref));line-height:calc(14px * var(--ref));font-weight:400;letter-spacing:calc(.6px * var(--ref));text-transform:uppercase}
.about-on-image .about-column,.about-on-image .about-mobile-top,.about-on-image .about-mobile-reader{font:inherit;letter-spacing:inherit}
.about-on-image h1,.about-on-image h2,.about-on-image p,.about-on-image li,.about-on-image strong,.about-on-image button,.about-on-image .eyebrow,.about-on-image .about-mobile-copy,.about-on-image .about-intro{font-family:inherit!important;font-size:inherit!important;line-height:inherit!important;font-weight:400!important;letter-spacing:inherit!important;text-transform:inherit!important}
.about-on-image .about-column .about-intro{margin:18px 0 20px}
.about-on-image .about-mobile-top .about-intro{margin:12px 0 0;max-width:100%}
.stone-label{background:none;color:var(--accent);padding:0;border:0;box-shadow:none}
html,body,a,button,button:not(:disabled),p,li,.text-button,.footer-link,.media-button{cursor:url('assets/ui/cursor-cross.svg') 13 13,crosshair}
.stone[data-project],.stone[data-project] *{cursor:url('assets/ui/cursor-eye.svg') 13 13,pointer}
@media(hover:hover) and (pointer:fine){
 .portfolio-carousel .portfolio-carousel__track[data-carousel-hover-direction="previous"],
 .portfolio-carousel .portfolio-carousel__track[data-carousel-hover-direction="previous"] .portfolio-carousel__image-button,
 .portfolio-carousel .portfolio-carousel__track[data-carousel-hover-direction="previous"] img,
 .portfolio-carousel .portfolio-carousel__arrow[data-carousel-direction="previous"]:not(:disabled),
 .portfolio-carousel .portfolio-carousel__arrow[data-carousel-direction="previous"]:not(:disabled) *{cursor:url('assets/ui/cursor-arrow-left.svg') 13 13,w-resize}
 .portfolio-carousel .portfolio-carousel__track[data-carousel-hover-direction="next"],
 .portfolio-carousel .portfolio-carousel__track[data-carousel-hover-direction="next"] .portfolio-carousel__image-button,
 .portfolio-carousel .portfolio-carousel__track[data-carousel-hover-direction="next"] img,
 .portfolio-carousel .portfolio-carousel__arrow[data-carousel-direction="next"]:not(:disabled),
 .portfolio-carousel .portfolio-carousel__arrow[data-carousel-direction="next"]:not(:disabled) *{cursor:url('assets/ui/cursor-arrow-right.svg') 13 13,e-resize}
}
@media(max-width:700px){
 .scene{background-image:url('assets/hero/portrait-clean-1920.webp');background-size:450% 100%;background-position:left top;background-repeat:no-repeat}
 .portrait,.intro-video{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 5%,#000 92%,transparent),linear-gradient(to right,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 5%,#000 92%,transparent),linear-gradient(to right,transparent,#000 3%,#000 97%,transparent);mask-composite:intersect}
 .portrait,.intro-video{filter:blur(.8px)}
 .about-home .portrait,.is-about-preview .portrait{filter:blur(8px)}
 :is(.about-home,.is-about-preview) .scene::after{
  content:"";position:absolute;inset:0;background:#f0eee99e;pointer-events:none;
 }
 .about-compact .about-on-image{
  inset:max(76px,calc(env(safe-area-inset-top) + 60px)) 20px max(70px,calc(env(safe-area-inset-bottom) + 56px));
  overflow:auto;overscroll-behavior-y:contain;pointer-events:auto;
  font-size:clamp(13px,3.6vw,16px);line-height:1.55;letter-spacing:.015em;text-transform:none;
  scrollbar-width:thin;scrollbar-color:#351e2866 transparent;
 }
 .about-compact :is(.about-mobile-top,.about-mobile-reader){position:static;overflow:visible}
 .about-compact .about-mobile-top .about-intro{margin-bottom:12px}
 .about-compact .about-tabs{flex-wrap:wrap;column-gap:10px;overflow:visible;font-size:clamp(12px,3.2vw,14px)}
 .about-compact .about-tabs button{min-height:44px}
 .about-compact .about-mobile-copy{overflow:visible;padding-top:14px}
 .about-compact .about-mobile-copy p{margin-bottom:14px}
 html,body,a,button,button:not(:disabled),p,li,.stone[data-project],.stone[data-project] *{cursor:auto}
 #app:is([data-view=home],[data-view=contact]) .site-header{align-items:center}
 #app:is([data-view=home],[data-view=contact]) .identity small{display:none}
 #app:is([data-view=home],[data-view=contact]) .scene{background:var(--cloud-dancer)}
 #app:is([data-view=home],[data-view=contact]) :is(.portrait,.intro-video){-webkit-mask-image:none;mask-image:none}
}
@media(max-width:700px) and (prefers-reduced-motion:no-preference){
 #app[data-view=home] .intro-finished .stone[data-project]:not(.is-selected,:hover,:focus-visible) img{
  animation:stone-jiggle 2.8s ease-in-out var(--jiggle-delay,0s) infinite;
 }
 .stone:nth-child(2n){--jiggle-delay:.32s}
 .stone:nth-child(3n){--jiggle-delay:.64s}
 .stone:nth-child(5n){--jiggle-delay:.96s}
 @keyframes stone-jiggle{
  0%,28%,100%{transform:none}
  6%{transform:translate(-1px,-2px) rotate(-6deg)}
  12%{transform:translate(1px,-4px) rotate(6deg)}
  18%{transform:translate(-1px,-2px) rotate(-4deg)}
  23%{transform:translateY(-1px) rotate(2deg)}
 }
}
@media(prefers-reduced-motion:reduce){.portrait,.intro-video{transition:none}}
