@charset "UTF-8";
/* Desktop gallery: the existing projects retain their source order and links. */
@media (min-width:901px) {
  #work[data-portfolio-state="loading"] .carousel-shell{visibility:hidden}
  #work>.work-heading,#work>.work-toolbar,#work #carousel-controls{display:none}
  #work .carousel-shell{margin-top:0}
  .carousel-shell:before{display:none}
  #project-track.is-accordion{
    display:block;position:relative;gap:0;height:var(--accordion-height,0px);
    padding:0;overflow:visible;mask-image:none;-webkit-mask-image:none;
    scroll-snap-type:none;scroll-behavior:auto;overscroll-behavior:auto;
    cursor:default;touch-action:auto;--accordion-gap:10px;--accordion-speed:1.3;
  }
  #project-track.is-accordion:after{display:none;content:none}
  #project-track.is-accordion > div{display:block;position:relative;width:100%;height:100%;transform:none;will-change:auto}
  #project-track.is-accordion .project-card{
    position:absolute;inset:0 auto 0 0;height:100%;padding:0;border:0;flex:none;
    border-radius:16px;background:#060010;opacity:1;box-shadow:none;filter:none;
    scroll-snap-align:none;scroll-snap-stop:normal;backdrop-filter:none;-webkit-backdrop-filter:none;
    overflow:hidden;isolation:isolate;pointer-events:auto;transition:none;
    animation:accordion-appear .6s both;animation-delay:calc(var(--accordion-index) * 60ms);
  }
  #project-track.is-accordion .project-image{
    display:block;position:absolute;inset:0;z-index:0;width:100%;height:100%;aspect-ratio:auto;
    border-radius:16px;clip-path:none;overflow:hidden;box-shadow:none;
  }
  #project-track.is-accordion .project-image>img,
  #project-track.is-accordion .project-image:hover>img{
    width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.65);
    transform:scale(1.08);transition:filter calc(600ms / var(--accordion-speed)) ease,transform calc(600ms / var(--accordion-speed)) cubic-bezier(.22,1,.36,1);
  }
  #project-track.is-accordion .is-active .project-image>img{
    filter:grayscale(0) brightness(1);
    transform:perspective(1200px) translate3d(var(--accordion-x,0px),var(--accordion-y,0px),0) rotateY(var(--accordion-tilt,0deg)) scale(1.08);
  }
  #project-track.is-accordion .project-image:after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(0deg,#060010e6,transparent 60%);opacity:.9;
  }
  #project-track.is-accordion .project-open{display:none}
  #project-track.is-accordion .project-caption{
    display:flex;position:absolute;z-index:2;left:20%;right:auto;top:calc(100% - 16px);bottom:auto;width:calc(var(--accordion-height) - 32px);max-width:none;
    padding:0;gap:8px;border:0;border-radius:0;background:none;box-shadow:none;
    backdrop-filter:none;-webkit-backdrop-filter:none;align-items:center;pointer-events:none;
    transform-origin:0 0;transform:rotate(-90deg);
  }
  #project-track.is-accordion .is-active .project-caption{
    left:24px;right:24px;top:auto;bottom:24px;width:auto;max-width:none;transform:none;align-items:start;
  }
  #project-track.is-accordion .project-caption a{pointer-events:none}
  #project-track.is-accordion .project-caption>div{min-width:0;flex:1}
  #project-track.is-accordion .project-caption h2,
  #project-track.is-accordion .project-caption h3{
    font-size:12px;line-height:16px;font-weight:600;letter-spacing:0;color:#fff;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;text-wrap:balance;
  }
  #project-track.is-accordion .is-active .project-caption h2,
  #project-track.is-accordion .is-active .project-caption h3{font-size:24px;line-height:32px;white-space:normal;text-wrap:balance;overflow:visible}
  #project-track.is-accordion .project-number{display:none}
  #project-track.is-accordion .project-caption p{display:none;font-size:14px;line-height:20px;color:#ffffffb3;margin-top:8px}
  #project-track.is-accordion .is-active .project-caption p{display:block}
  #project-track.is-accordion .project-category{display:none}
  #project-track.is-accordion .video-play{z-index:2;top:40%;width:48px;height:48px;opacity:0;transition:opacity .3s}
  #project-track.is-accordion .is-active .video-play{opacity:1}
  #project-track.is-accordion .video-duration{z-index:2;top:24px;right:24px;bottom:auto;opacity:0;transition:opacity .3s}
  #project-track.is-accordion .is-active .video-duration{opacity:1}
  /* Separate label layers keep the compact names legible during the slower reveal. */
  #project-track.is-accordion .has-caption-layers .project-caption {
    left:24px;right:24px;top:auto;bottom:24px;width:auto;max-width:none;min-width:0;
    transform:translateY(16px);opacity:0;align-items:start;
    transition:transform calc(1000ms / var(--accordion-speed)) cubic-bezier(.16,1,.3,1),opacity calc(200ms / var(--accordion-speed)) cubic-bezier(.16,1,.3,1);
  }
  #project-track.is-accordion .has-caption-layers.is-active.caption-fits .project-caption {
    transform:translateY(0);opacity:1;
    transition-duration:calc(1000ms / var(--accordion-speed)),calc(1000ms / var(--accordion-speed));transition-delay:calc(120ms / var(--accordion-speed));
  }
  #project-track.is-accordion .has-caption-layers:not(.caption-fits) .project-caption {visibility:hidden;}
  #project-track.is-accordion .has-caption-layers .project-caption h3 {font-size:24px;line-height:32px;}
  #project-track.is-accordion .has-caption-layers .project-caption p {display:block;}
  #project-track.is-accordion .project-caption-compact {
    display:flex;position:absolute;z-index:2;left:var(--compact-left,20%);top:calc(100% - 16px);
    width:calc(var(--accordion-height) - 32px);gap:8px;align-items:center;pointer-events:none;
    transform-origin:0 0;transform:rotate(-90deg) scale(var(--compact-scale,1));
    opacity:1;transition:opacity calc(700ms / var(--accordion-speed)) cubic-bezier(.16,1,.3,1);transition-delay:calc(120ms / var(--accordion-speed));
  }
  #project-track.is-accordion .is-active.caption-fits .project-caption-compact {opacity:0;transition-duration:calc(300ms / var(--accordion-speed));transition-delay:0ms;}
  #project-track.is-accordion .project-caption-compact>div {min-width:0;flex:1;}
  #project-track.is-accordion .project-caption-compact h3 {font:600 12px/16px var(--font-sans);color:#fff;white-space:normal;overflow-wrap:anywhere;text-wrap:balance;}
  #project-track.is-accordion .project-image:focus-visible{outline:2px solid #fff;outline-offset:-5px}
  #project-track.is-accordion + #carousel-controls{margin-top:24px}
  @keyframes accordion-appear{from{opacity:0}to{opacity:1}}
}
@media (min-width:901px) and (prefers-reduced-motion:reduce){
  #project-track.is-accordion .project-card{animation:none}
  #project-track.is-accordion .project-image>img,
  #project-track.is-accordion .project-caption,
  #project-track.is-accordion .project-open{transition:none}
  #project-track.is-accordion .has-caption-layers .project-caption,
  #project-track.is-accordion .project-caption-compact {transition:none;}
}