/* One photographic sequence: aligned spreads, a close-set film strip, a final triptych. */
.work { --gallery-gap: clamp(12px,1.35vw,22px); padding-top: 64px; }
.gallery-shell { width: min(90%,1280px); margin-inline: auto; }
.work-header { margin-bottom: 30px; }
.work-header .eyebrow { margin-bottom: 13px; }
.work-header h2 { font-family: var(--font-editorial); font-size: clamp(46px,4.4vw,66px); font-weight: 450; line-height: 1; letter-spacing: -.025em; }
.gallery-opening { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--gallery-gap); }
.photo-figure, .film-frame { min-width: 0; }
.photo-button { position: relative; display: block; padding: 0; width: 100%; overflow: hidden; background: #152e32; isolation: isolate; }
.photo-button::after { content: ''; position: absolute; inset: 0; pointer-events: none; border: 1px solid #e9e4d616; }
.photo-button img { width: 100%; height: 100%; object-fit: cover; object-position: var(--photo-focus,50% 50%); transition: transform .8s cubic-bezier(.2,.7,.15,1); }
.photo-button:focus-visible { outline-color: #e4c4a1; outline-offset: -4px; }
.gallery-lead .photo-button { height: min(70svh,700px); min-height: 430px; }
.photo-open { position: absolute; display: grid; place-items: center; right: 16px; bottom: 16px; width: 30px; height: 30px; border: 1px solid #fff5; border-radius: 50%; background: #10272a59; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; pointer-events: none; }
.photo-open::before { content: ''; width: 12px; height: 12px; background: linear-gradient(#fff,#fff) top left/5px 1px, linear-gradient(#fff,#fff) top left/1px 5px, linear-gradient(#fff,#fff) top right/5px 1px, linear-gradient(#fff,#fff) top right/1px 5px, linear-gradient(#fff,#fff) bottom left/5px 1px, linear-gradient(#fff,#fff) bottom left/1px 5px, linear-gradient(#fff,#fff) bottom right/5px 1px, linear-gradient(#fff,#fff) bottom right/1px 5px; background-repeat: no-repeat; }
.photo-button:focus-visible .photo-open { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .photo-button:hover img { transform: scale(1.025); }
  .photo-button:hover .photo-open { opacity: 1; transform: none; }
}

/* The normal grid is also the no-JavaScript and reduced-motion fallback. */
.film-section { padding-block: 42px; }
.film-track { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--gallery-gap); }
.film-frame .photo-button { aspect-ratio: 2/3; }
.film-footer { display: none; }
.details-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--gallery-gap); }
.details-grid .photo-button { aspect-ratio: 2/3; }
.collection-bottom { display: flex; justify-content: center; margin-top: 30px; padding-top: 28px; border-top: 1px solid #e4c4a125; }
.collection-bottom .button { min-width: 176px; }

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .film-section.is-scroll-gallery { height: calc(100svh + var(--film-travel,0px)); padding-block: 0; margin-block: 28px; }
  .is-scroll-gallery .film-sticky { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; }
  .is-scroll-gallery .film-window { overflow: clip; }
  .is-scroll-gallery .film-track { display: flex; width: max-content; gap: var(--gallery-gap); transform: translateX(var(--film-x,0px)); will-change: transform; }
  .is-scroll-gallery .film-frame { flex: 0 0 auto; width: min(48svh,480px); }
  .is-scroll-gallery .film-footer { display: block; margin-top: 22px; }
  .film-progress { height: 1px; background: #e4c4a12a; overflow: hidden; }
  .film-progress > span { display: block; height: 100%; background: #d3c4aa; transform: scaleX(var(--film-progress,0)); transform-origin: left; }
}
@media (max-width: 1023px) {
  .work { padding-top: 50px; }
  .gallery-shell { width: 88%; }
  .gallery-lead .photo-button { height: auto; min-height: 0; aspect-ratio: 4/5; }
  .film-section { padding-block: 24px; }
  .work-header { margin-bottom: 25px; }
}
@media (max-width: 700px) {
  .work { --gallery-gap: 12px; padding-top: 48px; }
  .work-header { margin-bottom: 22px; }
  .work-header h2 { font-size: 43px; }
  .gallery-opening { grid-template-columns: 1fr; }
  .gallery-lead .photo-button { aspect-ratio: 4/5; }
  .film-section { padding-block: 24px; }
  .film-track { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .details-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .details-grid .photo-figure:last-child { grid-column: 1/-1; }
  .details-grid .photo-figure:last-child .photo-button { aspect-ratio: 4/5; }
  .collection-bottom { margin-top: 25px; padding-top: 24px; }
  .collection-bottom .button { width: 100%; }
  .photo-open { right: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-button img { transition: none; }
  .photo-button:hover img { transform: none; }
}