*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:Arial,Helvetica,sans-serif;background:#f8f9fc;color:#222}button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid #444;outline-offset:6px}#gallery{height:100%;width:100%;position:relative;isolation:isolate}.stack{position:absolute;inset:0;pointer-events:none;transition:opacity .65s ease,filter .8s ease;z-index:1}.card{position:absolute;width:20.1vw;height:22.1vh;transform-origin:0 0;transform:matrix(.85,-.445,0,1,0,0);background:#ddd;box-shadow:0 2px 0 1px #c2c2c2,16px 27px 23px -19px #0006;will-change:transform}.card img{display:block;width:100%;height:100%;object-fit:cover}.card:after{content:'';position:absolute;inset:0;box-shadow:inset 3px 0 0 #ffffff65}.stack.restack .card{animation:shuffle .75s cubic-bezier(.22,.68,.22,1) both;animation-delay:calc(var(--i) * 5ms)}@keyframes shuffle{from{translate:38px 19px;opacity:.45}to{translate:0 0;opacity:1}}#selected{padding:0;border:0;position:absolute;left:41.5%;top:48%;width:20.1vw;height:22.1vh;transform:matrix(.85,-.445,0,1,0,0);transform-origin:0 0;background:transparent;cursor:pointer;z-index:3;transition:left .85s cubic-bezier(.22,.75,.18,1),top .85s cubic-bezier(.22,.75,.18,1),width .85s cubic-bezier(.22,.75,.18,1),height .85s cubic-bezier(.22,.75,.18,1),transform .85s cubic-bezier(.22,.75,.18,1),box-shadow .85s ease;box-shadow:14px 38px 23px -22px #0002}#hero{width:100%;height:100%;object-fit:cover;display:block}#selected.changing #hero{animation:photoIn .6s cubic-bezier(.22,.75,.18,1)}@keyframes photoIn{from{opacity:.2;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}#index{position:absolute;left:2.4%;bottom:5.1%;z-index:4;width:190px;transition:opacity .35s,transform .7s;mask-image:linear-gradient(transparent,#000 10%,#000 94%,transparent);max-height:45vh;overflow:hidden;padding:18px 0 5px}.category{font-size:12px;letter-spacing:2px;color:#aaa;margin:0 0 14px}.category:after{content:'';display:block;margin-top:7px;width:25px;border-bottom:1px solid #d4d4d4}#titles{display:flex;flex-direction:column;gap:10px}#titles button{background:none;border:0;padding:0;text-align:left;color:#a7a7a7;font-size:clamp(11px,.85vw,17px);cursor:pointer;line-height:1.15;transition:color .2s}#titles button:hover{color:#555}#titles button.active{color:#222;font-weight:600}footer{position:absolute;left:0;bottom:3.1%;width:100%;display:flex;align-items:center;justify-content:center;gap:24px;color:#aaa;letter-spacing:2px;font-size:clamp(9px,.85vw,16px);transition:opacity .4s;pointer-events:none}footer i{width:4.5vw;height:1px;background:#ccc}#hint{position:absolute;right:2.4%;top:3%;font-size:9px;letter-spacing:1.8px;color:#b0b0b0;transition:opacity .4s}.details{position:absolute;left:70%;top:42%;width:23%;opacity:0;transform:translateY(12px);transition:opacity .4s .2s,transform .6s .2s;pointer-events:none}.details span{font-size:10px;color:#b7b7b7;letter-spacing:2px}h1{font-size:clamp(18px,1.9vw,36px);letter-spacing:.3px;font-weight:600;margin:12px 0 23px}.details p{font-size:clamp(11px,.85vw,16px);line-height:1.7;color:#999;max-width:350px;margin:0 0 26px}.arrow,#close{position:absolute;border:0;background:transparent;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s;z-index:6;font-weight:300;color:#888}.arrow{top:46%;font-size:28px;padding:15px}#prev{left:.5%}#next{right:.5%}#close{top:1%;right:1%;font-size:25px;padding:10px}.open #selected{left:8%;top:16%;width:54%;height:68%;transform:matrix(1,0,0,1,0,0);cursor:default;box-shadow:0 20px 35px -25px #0004}.open .stack{opacity:0;filter:blur(6px)}.open #index{opacity:0;transform:translateY(15px);pointer-events:none}.open footer,.open #hint{opacity:0}.open .details{opacity:1;transform:none}.open .arrow,.open #close{opacity:1;pointer-events:auto}@media(max-width:650px){.card{width:42vw;height:19vh;transform:matrix(.7,-.36,0,1,0,0)}#selected{left:35%;top:43%;width:42vw;height:19vh;transform:matrix(.7,-.36,0,1,0,0)}#index{bottom:8%;max-height:26vh;left:5%}#titles{gap:9px}#hint{font-size:7px;top:3%}footer{font-size:7px;letter-spacing:1px;gap:12px}.open #selected{left:8%;top:19%;width:84%;height:42%}.details{left:12%;top:68%;width:75%}.details p{max-width:90%;font-size:12px;margin-bottom:16px}h1{margin:9px 0 12px}.arrow{top:37%;padding:8px}.open #prev{left:0}.open #next{right:0}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;transition-delay:0ms!important}}
.departing{position:absolute;left:41.5%;top:48%;width:20.1vw;height:22.1vh;transform:matrix(.85,-.445,0,1,0,0);transform-origin:0 0;border:0;padding:0;pointer-events:none;z-index:2;background:transparent}.departing img{width:100%;height:100%;object-fit:cover}@media(max-width:650px){.departing{left:35%;top:43%;width:42vw;height:19vh;transform:matrix(.7,-.36,0,1,0,0)}}
/* Stable card hit areas keep the lift from flickering at the exposed edges. */
.card{pointer-events:auto;padding:0;border:0;text-align:inherit;cursor:pointer;background:transparent;box-shadow:none;overflow:visible;touch-action:manipulation}
.card img{pointer-events:none;transition:transform .38s cubic-bezier(.2,.75,.2,1),box-shadow .38s;box-shadow:0 2px 0 1px #c2c2c2,16px 27px 23px -19px #0006}
.card:after{pointer-events:none;transition:transform .38s cubic-bezier(.2,.75,.2,1)}
.card:hover img,.card:focus-visible img,.card:hover:after,.card:focus-visible:after{transform:translateY(-42px)}
.card:hover img,.card:focus-visible img{box-shadow:0 2px 0 1px #ddd,18px 44px 29px -17px #0005}
.card:focus-visible{outline:2px solid #777;outline-offset:3px}
.open .card{pointer-events:none;visibility:hidden}
@media(prefers-reduced-motion:reduce){.card img,.card:after{transition:none}}
html,body,#gallery{overflow:clip}