/* Three photographic directions. Shared natural-scroll timeline, distinct compositions. */
.exp-scroll{--exp-top:78px;position:relative;background:#101010;color:#f5f5f5}
.exp-stage{position:sticky;top:var(--exp-top);height:calc(100svh - var(--exp-top));min-height:440px;overflow:hidden;isolation:isolate}
.exp-stage:focus-visible{outline-offset:-2px}
.exp-world{position:absolute;inset:0;perspective:1200px;perspective-origin:50% 47%}
.exp-frame{position:absolute;inset:0;visibility:hidden;overflow:hidden;will-change:transform,clip-path,opacity}
.exp-frame .photo,.exp-slice .photo{width:100%;height:100%;background:#191919}
.exp-frame .photo:hover img,.exp-slice .photo:hover img{transform:none}
.exp-top{position:absolute;left:var(--gutter);right:var(--gutter);top:30px;z-index:12;display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:15px;line-height:1.4;pointer-events:none}
.exp-top img{width:112px;height:auto;position:absolute;left:50%;transform:translateX(-50%)}
.exp-top>span:last-child{color:#ddd}
.exp-bottom{position:absolute;left:var(--gutter);right:var(--gutter);bottom:38px;z-index:12;display:flex;align-items:flex-end;justify-content:space-between;gap:35px;pointer-events:none}
.exp-title{font-weight:450;font-size:clamp(42px,6.3vw,96px);line-height:1.06;letter-spacing:-.055em;max-width:77%;text-wrap:balance}
.exp-timeline{width:140px;flex-shrink:0;height:2px;background:#ffffff35;margin-bottom:10px;overflow:hidden}.exp-timeline i{display:block;height:100%;width:100%;background:#fff;transform-origin:left;transform:scaleX(.125)}
.exp-grain{position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23888' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");opacity:.07;pointer-events:none;z-index:10}
/* H / A full-bleed photograph, a calm hold, then a diagonal cut. */
.exp-h .exp-stage:after{content:'';position:absolute;inset:0;z-index:8;pointer-events:none;background:linear-gradient(#0006,transparent 25%,transparent 55%,#000b)}
.exp-h .exp-frame .photo{transform:translateX(var(--drift,0)) scale(1.15)}
.exp-h .exp-frame:after{content:'';position:absolute;inset:0;background:#000;opacity:var(--shade,0);pointer-events:none}
.exp-h .exp-title{text-shadow:0 2px 30px #0004}
/* I / Photographs move out of the dark, toward the viewer. */
.exp-i .exp-halo{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,#565656 0%,#252525 26%,#111 62%);opacity:.7}
.exp-i .exp-world{inset:68px 0 90px}
.exp-i .exp-frame{inset:auto;left:50%;top:48%;width:min(59vw,calc((100svh - var(--exp-top) - 205px)*1.3333));aspect-ratio:4/3;overflow:visible;backface-visibility:hidden;transform-origin:center;box-shadow:0 30px 80px #0007}
.exp-i .exp-frame:after{content:'';position:absolute;inset:0;border:1px solid #ffffff30;pointer-events:none}
.exp-i .exp-title{font-size:clamp(36px,4.3vw,66px)}
.exp-i .exp-bottom{bottom:28px}
/* J / Three mechanical shutters, with color reserved for the middle aperture. */
.exp-j{background:#d4d4d4;color:#1d1d1d}
.exp-j .exp-top img{filter:invert(1)}.exp-j .exp-top>span:last-child{color:#555}
.exp-j .exp-halo{position:absolute;inset:0;background:radial-gradient(ellipse at center,#f0f0f0,#bcbcbc)}
.exp-shutters{position:absolute;inset:90px 5vw 125px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px}
.exp-shutter{position:relative;overflow:hidden;background:#222;box-shadow:0 18px 35px -25px #0008}
.exp-shutter:nth-child(2){transform:translateY(-16px)}
.exp-slice{position:absolute;inset:0;will-change:transform;visibility:hidden}
.exp-slice .photo img{position:absolute;top:0;left:calc(var(--column)*-100%);width:300%;height:100%;max-width:none;object-fit:cover}
.exp-shutter:not(:nth-child(2)) .photo{filter:grayscale(1)}
.exp-j .exp-title{font-size:clamp(36px,4.5vw,68px)}.exp-j .exp-bottom{bottom:30px}
.exp-j .exp-timeline{background:#2223}.exp-j .exp-timeline i{background:#222}
.exp-static{padding:40px var(--gutter);display:grid;grid-template-columns:1fr 1fr;gap:35px}.exp-static .photo{width:100%;aspect-ratio:4/3}.exp-static figcaption{font-size:18px;padding-top:14px}
@media(max-width:650px){.exp-stage{height:100svh;min-height:520px}.exp-top{top:28px;font-size:14px;gap:12px}.exp-top img{width:85px}.exp-bottom{bottom:8svh;flex-direction:column;align-items:flex-start;gap:26px}.exp-title{font-size:42px;max-width:100%}.exp-timeline{width:100%;margin:0}.exp-h .exp-frame .photo img{object-position:48% 50%}.exp-i .exp-world{inset:90px 0 150px;perspective:900px}.exp-i .exp-frame{width:78vw;top:50%}.exp-i .exp-title,.exp-j .exp-title{font-size:34px}.exp-i .exp-bottom,.exp-j .exp-bottom{bottom:8svh}.exp-shutters{inset:20svh 4vw 25svh;gap:6px}.exp-shutter:nth-child(2){transform:translateY(-10px)}.exp-slice .photo img{object-position:50% 50%}.exp-static{grid-template-columns:1fr}}