/* Original photographs remain browsable without JavaScript. */
.photo-gallery{--photo-field-height:420px;--photo-prose-gap:36px;margin-block:var(--space-7);width:100%;position:relative}
.photo-gallery-field{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:20px;max-height:620px;overflow:auto;border-radius:var(--radius-placeholder);outline-offset:6px}
.photo-gallery-card{position:relative;overflow:hidden;border-radius:12px;aspect-ratio:var(--photo-ratio);background:var(--color-surface);isolation:isolate}
.photo-gallery-crop{position:absolute;inset:0;overflow:hidden;border-radius:12px}
.photo-gallery-card img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none;-webkit-user-drag:none}
.photo-gallery-enhanced img[data-photo-unavailable]{visibility:hidden}
.photo-crop-balloons img{position:absolute;left:-77.51%;width:226.58%;max-width:none}
.photo-crop-coast img{position:absolute;top:-10.23%;left:-.09%;height:120.93%;width:100.17%;max-width:none}
.photo-crop-coffee .photo-gallery-crop{inset:-3.57% -28.43% -15% -10%}
.photo-crop-coffee img{position:absolute;left:-39.05%;top:-.03%;height:100.06%;width:168.66%;max-width:none}
.photo-crop-paddle .photo-gallery-crop{inset:-18.21% -35% -29.35% -27.37%}
.photo-gallery-enhanced{width:var(--photo-viewport-width,100vw);max-width:none;left:50%;transform:translateX(-50%);cursor:grab}
.photo-gallery-enhanced .photo-gallery-field{display:block;height:var(--photo-field-height);max-height:none;border-radius:0;padding:0;overflow:hidden;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent)}
.photo-gallery-enhanced .photo-gallery-card{position:absolute;left:0;top:0;will-change:transform;transform-origin:center;contain:layout paint;}
.photo-gallery-enhanced[data-dragging],.photo-gallery-enhanced[data-dragging] .photo-gallery-field{cursor:grabbing}
.photo-gallery-field:focus-visible{outline:var(--focus-width) solid var(--color-ink);outline-offset:4px}
@media(max-width:767px), (max-width:1023px) and (pointer:coarse){
 .photo-gallery-field{grid-template-columns:repeat(2,minmax(0,1fr))}
 .photo-gallery{--photo-field-height:308px;--photo-prose-gap:24px}
}

.photo-crop-coffee{mask-image:url('/assets/photo-128fa.svg');mask-size:100% 100%;mask-repeat:no-repeat}
.photo-crop-paddle{mask-image:url('/assets/photo-ca5dc.svg');mask-size:100% 100%;mask-repeat:no-repeat}

/* Keep both fades entirely inside the gallery, clear of adjacent prose. */
.photo-page .about-main{isolation:isolate}
.photo-page .about-intro{position:relative;z-index:2;margin-bottom:0}
.photo-page .photo-gallery-enhanced{z-index:1;margin-block:var(--photo-prose-gap)}

/* About: the text stays sharp above the progressive white/blur transition. */
.about-main.about-gallery-main{padding-bottom:0;isolation:isolate}
.about-gallery-main .about-sections{position:relative;z-index:2}
.photo-gallery.photo-gallery-footer{--photo-field-height:var(--height-about-photo-desktop);--photo-background-offset:var(--offset-about-photo-background);--photo-text-overlap:calc(var(--type-body) * var(--line-copy) * 2);z-index:1;margin-block:calc(var(--photo-background-offset) - var(--photo-text-overlap)) 0}
@media(max-width:767px), (max-width:1023px) and (pointer:coarse){
 .photo-gallery.photo-gallery-footer{--photo-field-height:var(--height-about-photo-mobile)}
}
.photo-gallery-footer.photo-gallery-enhanced .photo-gallery-field{mask-image:none;height:calc(var(--photo-field-height) + var(--radius-panel) + var(--photo-text-overlap) + var(--photo-prose-gap))}
.photo-gallery-top-fade{display:none}
.photo-gallery-enhanced .photo-gallery-top-fade{display:block;position:absolute;inset:0 0 auto;height:180px;pointer-events:none;z-index:2}
.photo-gallery-top-fade::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgb(255 255 255 / 0) 0%,var(--color-canvas) 100%)}
/* Blur is clipped to each photo, so image colors cannot spill into white seams. */
.photo-gallery-footer .photo-gallery-card[data-top-blur]::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px);mask-image:linear-gradient(to bottom,#000 var(--photo-fade-start),transparent var(--photo-fade-end))}
/* Continue photos beneath the rounded corners instead of exposing white ears. */
.about-gallery-main + .footer{margin-top:calc(-1 * var(--radius-panel))}