@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/IBMPlexMono-Regular.ttf') format('truetype')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/IBMPlexMono-Medium.ttf') format('truetype')}
*{box-sizing:border-box}html{font-size:13px;scroll-behavior:smooth}body{margin:0;background:#fff;color:#303030;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;border:0;padding:0;border-radius:0;background:transparent;cursor:pointer}a:active,button:active{opacity:.7}:focus,:focus-visible{outline:none}[hidden]{display:none!important}.opening{height:100svh}.identity{position:fixed;inset:0;z-index:2;display:flex;align-items:center;padding:2rem;pointer-events:none;mix-blend-mode:difference;color:#303030;font-size:2.45rem;line-height:.9;letter-spacing:-.046em}.identity a{pointer-events:auto}.identity .columns{width:100%}.columns{display:grid;gap:1rem;align-items:start}.column{min-width:0}.mobile{display:none}main{padding:2rem 2rem 9rem}.gallery{width:100%}.gallery-row{display:flex;gap:2rem;align-items:stretch}.tile{margin:0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end}.gallery .tile{flex-shrink:0}.media-link{display:block;width:100%;text-align:inherit}.media{width:100%;height:auto;display:block;object-fit:contain}.zoom{cursor:zoom-in}.caption{font-family:'IBM Plex Mono',monospace;font-size:.8rem;font-weight:500;color:#c5c5c5;line-height:1.15;letter-spacing:0;margin:.7em 0 3em;display:block}.caption span{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif}footer{padding:2rem;margin-top:-7rem;font-size:2.45rem;line-height:.9;letter-spacing:-.046em;mix-blend-mode:difference;color:#303030}.overlay{position:fixed;inset:0;z-index:10;overflow-y:auto;overscroll-behavior:contain;display:flex;justify-content:flex-end;align-items:flex-start}.panel{width:50%;min-height:100%;padding:2rem;background:rgba(115,115,115,.5);backdrop-filter:blur(1.1rem);-webkit-backdrop-filter:blur(1.1rem);color:#fff;font-size:2.45rem;line-height:.9;letter-spacing:-.046em;animation:panel-enter .8s cubic-bezier(.4,0,.2,1)}.panel.info{width:100%;padding-top:1.6rem;padding-bottom:4rem;animation:info-enter 1.2s ease}.info-copy{font-size:1.25rem;font-weight:400;color:#fff;line-height:1.25;letter-spacing:-.01em;display:block}.info-copy a{color:#fff}hr{height:1px;border:0;background:#fff;margin:1rem 0}/* A definite stage keeps portrait, landscape, and video slides out of text flow. */
.slideshow{position:relative;width:100%;min-width:0;display:block;isolation:isolate}
.slides{position:relative;display:block;width:100%;height:var(--gallery-frame-height,32rem);min-height:0;overflow:hidden}
.slides>.tile{position:absolute;inset:0;display:none;width:100%;height:100%;min-width:0;min-height:0;margin:0;align-items:center;justify-content:center;overflow:hidden}
.slides>.tile.active{display:flex}
.slides .media-link{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}
.slides .media,.slides .tile>.media{display:block;width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%;object-fit:contain;object-position:center}
/* Invisible half-frame controls match the reference's directional cursors. */
.slide-prev,.slide-next,.lightbox-prev,.lightbox-next{position:absolute;top:0;bottom:0;width:50%;height:auto;padding:0;border:0;border-radius:0;background:transparent;transform:none;font-size:0;z-index:2;touch-action:pan-y}
.slide-prev,.lightbox-prev{left:0;cursor:w-resize}
.slide-next,.lightbox-next{right:0;cursor:e-resize}
.slide-prev:active,.slide-next:active,.lightbox-prev:active,.lightbox-next:active{opacity:1}
.slideshow.has-video-controls .slide-prev,.slideshow.has-video-controls .slide-next,#lightbox.has-video-controls .lightbox-prev,#lightbox.has-video-controls .lightbox-next{bottom:64px}
.slideshow .zoom{cursor:inherit}
.media-grid{display:grid;grid-template-columns:repeat(var(--columns,2),minmax(0,1fr));gap:1rem;align-items:center}.panel .caption{margin-bottom:1em}body.modal-open{overflow:hidden}#lightbox{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:1rem;background:#fff;z-index:20}#lightbox::backdrop{background:#fff}.lightbox-media{height:100%;display:flex;align-items:center;justify-content:center}.lightbox-media>.media{width:100%;height:100%;object-fit:contain}.lightbox-close{position:absolute;right:20px;top:15px;font-size:32px;color:#333;z-index:3}.skip,.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.skip:focus{position:fixed;left:1rem;top:1rem;width:auto;height:auto;clip-path:none;padding:1rem;background:#fff;z-index:30}@keyframes panel-enter{from{opacity:0}to{opacity:1}}@keyframes info-enter{from{opacity:0}to{opacity:1}}
@media(max-width:768px){.desktop{display:none}.mobile{display:block}.identity.mobile{display:flex;justify-content:center;padding:.75rem;font-size:2.45rem;line-height:.9;text-align:center}.mobile-intro{width:100%}.mobile-info{position:absolute;top:max(20px,env(safe-area-inset-top));left:50%;transform:translateX(-50%)}.identity.mobile .columns{display:block}.identity.mobile .column{width:100%}main{padding:1.5rem 1.5rem 9rem}.gallery-row{gap:1.5rem}.panel{width:100%;padding:1.5rem}.panel.info{padding:1.2rem 1.5rem 3rem}.columns.mobile-stack{display:block}footer{padding:1.5rem}.caption{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* Harrison Gyde reference: a restrained, staggered opacity reveal. */
.js .identity{opacity:0;transition:opacity 2400ms ease 400ms}
.js footer{opacity:0;transition:opacity 300ms ease}
.js main{opacity:0;transition:opacity 300ms ease}
.js body.is-loaded .identity,.js body.is-loaded footer,.js body.is-loaded main{opacity:1}
/* Project media becomes a continuous vertical sequence on phones. */
@media(max-width:768px){
  .slideshow .slides{height:auto;display:flex;flex-direction:column;gap:20px;overflow:visible}
  .slideshow .slides>.tile{position:relative;inset:auto;display:flex;width:100%;height:auto;overflow:visible}
  .slideshow .slides .media-link{height:auto;display:block;overflow:visible}
  .slideshow .slides .media,.slideshow .slides .tile>.media{width:100%;height:auto;max-height:none;object-fit:contain}
  .slideshow .slide-prev,.slideshow .slide-next,.slideshow .slide-status{display:none}
}
@media(prefers-reduced-motion:reduce){
  .js .identity,.js footer,.js main{opacity:1;transition:none}
}

/* Wheel interpolation must not start a second CSS scroll animation. */
.overlay{scroll-behavior:smooth}
.is-smoothing{scroll-behavior:auto!important}
/* Invert the final page composition, including photographs and video. The
   modal viewer lives in the browser's top layer and needs its own filter. */
html.is-inverted{filter:invert(1);background:#fff}
html.is-inverted #lightbox{filter:invert(1)}
html.is-inverted #lightbox::backdrop{background:#000}
@media(prefers-reduced-motion:reduce){.overlay{scroll-behavior:auto}}