/* Sand remains physical; frosted grain belongs only to the glass photo rims. */
.surf-gallery{position:relative;isolation:isolate;padding:0 4%;background:#dcd0c2 url('assets/fast/sand-board.webp') center/cover no-repeat}
.surf-gallery-window{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.2vw,34px);max-width:1440px;margin:0 auto}
.surf-gallery-column{display:contents}
.surf-photo{--frame-rim:8px;position:relative;min-width:0;margin:0;padding:var(--frame-rim);border:1px solid #ffffff66;border-radius:24px;background:linear-gradient(145deg,#ffffff50,#dae7df16 45%,#fff1c433);box-shadow:inset 1px 1px 0 var(--field-highlight),inset -1px -1px 0 var(--field-line),0 12px 28px -12px #354b4a4d}
.surf-photo::before{content:'';position:absolute;inset:-1px;padding:1px;border-radius:inherit;background:linear-gradient(140deg,#ffffffee,#fff9df38 28%,#5b8c9444 57%,#fff0b9dd 88%,#ffffff90);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none}
.surf-photo::before{z-index:2}
/* Static tint and real grain stay on the rim; no full-photo backdrop resampling while tracks scroll. */
.surf-photo::after{content:'';position:absolute;inset:0;z-index:0;padding:var(--frame-rim);border-radius:inherit;background-image:linear-gradient(145deg,var(--field-highlight),#efdfc612 45%,var(--field-surface)),url('assets/field-grain.svg');background-size:100% 100%,160px 160px;background-blend-mode:soft-light;opacity:var(--field-grain-opacity);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none}
.surf-photo img{position:relative;z-index:1;display:block;width:100%;height:auto;aspect-ratio:var(--photo-ratio,3/4);object-fit:cover;object-position:var(--photo-focus,50% 50%);border-radius:16px}
.surf-gallery--motion .surf-gallery-window{height:min(190svh,140vw,2400px);overflow:hidden;overflow:clip}
.surf-gallery--motion .surf-gallery-column{display:flex;flex-direction:column;gap:clamp(14px,2.2vw,34px);align-self:start;min-width:0;will-change:transform}
.surf-gallery--motion .surf-photo{flex:none}
.surf-gallery--motion .surf-gallery-column:nth-child(2) .surf-photo img{aspect-ratio:var(--photo-ratio,4/5)}
@media(max-width:640px){
 .surf-gallery{padding:0 16px}
 .surf-gallery-window{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
 .surf-photo{--frame-rim:5px;border-radius:19px;box-shadow:inset 1px 1px 0 var(--field-highlight),0 8px 20px -10px #354b4a4d}
 .surf-photo img{border-radius:13px}
 .surf-gallery--motion .surf-gallery-window{height:min(155svh,320vw)}
 .surf-gallery--motion .surf-gallery-column{gap:14px}
 .surf-gallery--motion .surf-gallery-column:nth-child(3){display:none}
}