/* Four postcards inhabit the page, with gentle perspective rather than a flat gallery. */
.photo-grid{position:relative;isolation:isolate;perspective:1400px;gap:32px 44px;padding:45px 35px 80px;margin:0 -6px}.photo-grid:before{content:"";position:absolute;inset:-15px -15px -5px;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at 23% 27%,#c9d6f34d,transparent 55%),radial-gradient(ellipse at 79% 67%,#eccce04d,transparent 52%);filter:blur(12px)}.photo-grid:after{content:"";position:absolute;left:6%;top:7%;width:88%;height:81%;z-index:-1;border:1px dashed #aeb8d43d;border-radius:50%;transform:rotate(-15deg);pointer-events:none}.photo-card{--rest-z:0px;--rest-y:0px;--rest-roll:-4deg;--rest-yaw:4deg;--rest-pitch:3deg;--tilt-x:0deg;--tilt-y:0deg;--drift-x:0px;--drift-y:0px;position:relative;padding:10px 10px 0;border-radius:9px;border-bottom-width:3px;transform-style:preserve-3d;transform:translate3d(var(--drift-x),calc(var(--rest-y) + var(--drift-y)),var(--rest-z)) rotateX(calc(var(--rest-pitch) + var(--tilt-x))) rotateY(calc(var(--rest-yaw) + var(--tilt-y))) rotateZ(var(--rest-roll));box-shadow:0 3px 3px #5a659414,0 19px 29px #59618224,0 35px 65px #757b9c10;transition:transform .55s cubic-bezier(.2,.75,.25,1),box-shadow .5s,border-color .3s;backface-visibility:hidden}.photo-card:nth-child(2){--rest-y:43px;--rest-z:-18px;--rest-roll:4.5deg;--rest-yaw:-5deg;--rest-pitch:-2deg}.photo-card:nth-child(3){--rest-y:4px;--rest-z:24px;--rest-roll:3deg;--rest-yaw:3deg;--rest-pitch:2deg}.photo-card:nth-child(4){--rest-y:34px;--rest-z:9px;--rest-roll:-3.5deg;--rest-yaw:-4deg;--rest-pitch:-2deg}.photo-card:focus-within{z-index:5;border-color:var(--accent);box-shadow:0 4px 6px #59618216,0 23px 40px #5961822e}.photo-card.is-tilting{z-index:5;transition:transform .12s ease-out,box-shadow .4s,border-color .3s;box-shadow:0 5px 7px #59618212,0 27px 42px #5961822c,0 40px 75px #757b9c15}.photo-card:hover{transform:translate3d(var(--drift-x),calc(var(--rest-y) + var(--drift-y)),var(--rest-z)) rotateX(calc(var(--rest-pitch) + var(--tilt-x))) rotateY(calc(var(--rest-yaw) + var(--tilt-y))) rotateZ(var(--rest-roll))}.photo-open,.photo-image{border-radius:4px}.photo-image:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at var(--shine-x,35%) var(--shine-y,20%),#fff5,transparent 64%);mix-blend-mode:soft-light;opacity:0;transition:opacity .4s}.photo-card.is-tilting .photo-image:before{opacity:.65}.photo-card figcaption{padding:16px 9px 19px}.photo-card figcaption>span{font-family:Georgia,"PingFang SC","Microsoft YaHei",serif}.photo-zoom{transform:translateZ(8px);border-radius:8px}.gallery-footnote{margin-top:5px}.photo-dialog[open] .viewer-shell{animation:postcard-arrive .42s cubic-bezier(.2,.75,.25,1) both;transform-origin:var(--viewer-origin-x,50%) var(--viewer-origin-y,65%)}.photo-dialog[open]::backdrop{animation:space-dim .35s ease both}.viewer-image-area>img{box-shadow:0 25px 80px #05081666;border:1px solid #dce4ff19}
[data-theme=dark] .photo-grid:before{background:radial-gradient(ellipse at 23% 27%,#778cc229,transparent 55%),radial-gradient(ellipse at 79% 67%,#b586b329,transparent 52%)}[data-theme=dark] .photo-grid:after{border-color:#adb9ef1e}[data-theme=dark] .photo-card{box-shadow:0 3px 5px #070b1d55,0 22px 38px #070b1d66,0 40px 70px #070b1d33}
@keyframes postcard-arrive{from{opacity:0;transform:perspective(1200px) translateY(30px) translateZ(-100px) rotateX(6deg) scale(.88)}to{opacity:1;transform:perspective(1200px) translateY(0) translateZ(0) rotateX(0) scale(1)}}
@keyframes space-dim{from{opacity:0}to{opacity:1}}
@media(max-width:820px){.photo-grid{padding:32px 23px 65px;gap:24px 30px;margin:0 -3px}.photo-card{padding:7px 7px 0;--rest-roll:-3deg;--rest-yaw:3deg}.photo-card:nth-child(2){--rest-y:28px;--rest-roll:3.5deg}.photo-card:nth-child(3){--rest-y:2px;--rest-roll:2.5deg;--rest-z:12px}.photo-card:nth-child(4){--rest-y:22px;--rest-roll:-3deg}.photo-card figcaption{padding:13px 6px 16px}}
@media(max-width:600px){.photo-grid{padding:24px 18px 32px;gap:29px;perspective:1600px;margin:0}.photo-grid:before{inset:0 -6px;filter:blur(8px)}.photo-grid:after{left:1%;top:4%;width:98%;height:91%;transform:rotate(-3deg)}.photo-card{--rest-roll:-3deg;--rest-pitch:1deg;--rest-yaw:2deg;--rest-y:0px;--rest-z:0px;padding:8px 8px 0;box-shadow:0 2px 3px #59618212,0 14px 24px #59618222,0 28px 44px #757b9c0a}.photo-card:nth-child(2){--rest-y:0px;--rest-z:0px;--rest-roll:2.5deg;--rest-yaw:-2deg;--rest-pitch:-1deg}.photo-card:nth-child(3){--rest-y:0px;--rest-z:0px;--rest-roll:-2deg;--rest-yaw:2deg;--rest-pitch:1deg}.photo-card:nth-child(4){--rest-y:0px;--rest-z:0px;--rest-roll:3deg;--rest-yaw:-2deg;--rest-pitch:-1deg}.photo-card figcaption{padding:15px 7px 18px}.photo-card figcaption>span{font-size:11px}.photo-card time{font-size:9px}.gallery-footnote{margin-top:12px}}
/* Feather only thumbnail pixels into the same paper surface, leaving large photos untouched. */
.photo-open{background:transparent}
.photo-image{background:var(--surface)}
.photo-image>img,.photo-image:after{mask-image:linear-gradient(90deg,transparent,#000 1.5%,#000 98.5%,transparent),linear-gradient(180deg,transparent,#000 2%,#000 95%,transparent);mask-composite:intersect}
.photo-open:hover img,.photo-open:focus-visible img{transform:none}
@media(max-width:600px){.photo-grid:after{left:5%;width:90%;transform:rotate(-1deg)}}
@media(prefers-reduced-motion:reduce){.photo-card,.photo-card:hover{transform:rotate(var(--rest-roll))}.photo-dialog[open] .viewer-shell,.photo-dialog[open]::backdrop{animation:none}.photo-image:before{display:none}.photo-card{transition:none}}