/* V5.16 — an editorial contact sheet for Andreas's supplied photographs. */
.az-artworks .az-art-details-pre-photo{padding-bottom:0}
.az-artworks .az-art-details-after-photo{padding-top:87px}

.az-photo-section{
  position:relative;
  isolation:isolate;
  scroll-margin-top:96px;
  padding:clamp(74px,8vw,125px) 0 clamp(76px,9vw,140px);
  background:#092f35;
  border-block:1px solid rgba(223,193,149,.27);
}
.az-photo-section::before{
  content:'';
  position:absolute;
  left:var(--page-gutter);
  top:0;
  width:clamp(54px,9vw,150px);
  height:3px;
  background:#ab674e;
}
.az-photo-intro{
  display:grid;
  grid-template-columns:minmax(135px,1fr) minmax(0,3.7fr);
  gap:clamp(26px,5.5vw,90px);
  align-items:start;
  padding-bottom:clamp(38px,5vw,77px);
}
.az-photo-side{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:11px 0 0 19px;
  border-left:1px solid #ad7358;
  color:#d8b98d;
  font:400 .61rem/1.55 'AZ Mono','IBM Plex Mono',monospace;
  letter-spacing:.16em;
  white-space:nowrap;
}
.az-photo-side span:last-child{color:#a9c3bf}
.az-photo-intro-copy .az-serial{margin:0 0 13px;color:#dcac83}
.az-photo-intro-copy .az-serial::before{background:#ab674e}
.az-photo-intro-copy h2{
  width:max-content;
  max-width:100%;
  margin:0 0 16px;
  color:#f0e8dc;
  font:400 clamp(3.8rem,8vw,9rem)/.96 'AZ Gruppo','Gruppo',sans-serif;
  letter-spacing:-.075em;
}
.az-photo-intro-copy>p:last-child{
  max-width:60ch;
  margin:0;
  color:#cfdbd4;
  font-size:clamp(.98rem,1.25vw,1.17rem);
  line-height:1.75;
}

/* Three uneven columns repeat in a measured sequence. DOM order stays visual order. */
.az-photo-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(12px,1.5vw,24px);
  row-gap:clamp(32px,4.5vw,78px);
  align-items:start;
}
.az-photo-card{
  position:relative;
  display:block;
  grid-column:span 4;
  min-width:0;
  padding:8px 8px 0;
  overflow:hidden;
  color:#e9d1aa;
  text-decoration:none;
  background:#08282e;
  border:1px solid rgba(206,183,149,.34);
  box-shadow:8px 10px 0 rgba(1,20,25,.29);
  transition:border-color .45s ease,box-shadow .55s ease,transform .6s cubic-bezier(.2,.8,.2,1);
}
.az-photo-card:nth-child(3n + 1){grid-column:span 5}
.az-photo-card:nth-child(3n + 2){grid-column:span 3}
.az-photo-card:nth-child(3n + 3){grid-column:span 4}
.az-photo-card:nth-child(6n + 4){grid-column:span 3}
.az-photo-card:nth-child(6n + 5){grid-column:span 4}
.az-photo-card:nth-child(6n + 6){grid-column:span 5}
.az-photo-card:nth-child(16){grid-column:span 7}
.az-photo-card:nth-child(17){grid-column:span 5}
.az-photo-card:nth-child(3n + 2){margin-top:clamp(24px,6vw,92px)}
.az-photo-card:nth-child(6n + 3){margin-top:clamp(8px,2vw,28px)}
.az-photo-card:nth-child(6n + 5){margin-top:0}
.az-photo-card img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:cover;
  background:#17454c;
  transition:transform .85s cubic-bezier(.2,.7,.23,1),filter .6s ease;
}
.az-photo-card::after{
  content:'';
  position:absolute;
  pointer-events:none;
  inset:8px 8px 32px;
  border:1px solid rgba(241,222,189,.2);
  opacity:0;
  transform:translate(5px,-5px);
  transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1);
}
.az-photo-card-no{
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:32px;
  padding:5px 2px 4px;
  font:400 .64rem/1.3 'AZ Mono','IBM Plex Mono',monospace;
  letter-spacing:.13em;
}
.az-photo-card-no b{font-weight:400;color:#a8bdba}
.az-photo-card:is(:hover,:focus-visible){
  border-color:#cc9d71;
  box-shadow:12px 16px 0 rgba(1,20,25,.4);
  transform:translate(-3px,-5px);
}
.az-photo-card:is(:hover,:focus-visible) img{transform:scale(1.025);filter:contrast(1.045)}
.az-photo-card:is(:hover,:focus-visible)::after{opacity:1;transform:none}
.az-photo-card:focus-visible{outline:2px solid #f2cf9c;outline-offset:5px}
.az-photo-footnote{
  margin-top:clamp(39px,5vw,80px);
  padding-top:21px;
  border-top:1px solid rgba(215,186,144,.28);
  color:#d0b48a;
  font:400 .59rem/1.6 'AZ Mono','IBM Plex Mono',monospace;
  letter-spacing:.18em;
}

.az-photo-viewer{
  width:min(1200px,calc(100vw - 34px));
  max-width:none;
  height:min(880px,calc(100dvh - 34px));
  max-height:none;
  padding:55px 78px 57px;
  color:#f2eadb;
  background:#06272d;
  border:1px solid #b88c69;
  box-shadow:0 30px 100px rgba(0,9,12,.65);
  overflow:hidden;
}
.az-photo-viewer[open]{display:flex;align-items:center;justify-content:center}
.az-photo-viewer::backdrop{background:rgba(0,15,20,.91);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.az-photo-viewer-shell{width:100%;height:100%;min-height:0;display:grid;place-items:center}
.az-photo-viewer-figure{width:100%;height:100%;min-height:0;margin:0;display:grid;place-items:center}
.az-photo-viewer-image{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:calc(100dvh - 170px);
  object-fit:contain;
  box-shadow:0 10px 36px rgba(0,10,14,.42);
}
.az-photo-viewer button{
  position:absolute;
  z-index:2;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  padding:0;
  color:#eed0a1;
  background:rgba(4,34,41,.84);
  border:1px solid rgba(225,188,134,.55);
  border-radius:0;
  cursor:pointer;
  line-height:1;
  transition:color .25s ease,background .25s ease,border-color .25s ease,transform .25s ease;
}
.az-photo-viewer button:is(:hover,:focus-visible){color:#082b32;background:#edcfa0;border-color:#edcfa0}
.az-photo-viewer button:focus-visible{outline:2px solid #f8dfb3;outline-offset:4px}
.az-photo-viewer-close{top:12px;right:12px;font-size:1.6rem}
.az-photo-viewer-prev,.az-photo-viewer-next{top:50%;font-size:1.65rem;transform:translateY(-50%)}
.az-photo-viewer-prev{left:16px}
.az-photo-viewer-next{right:16px}
.az-photo-viewer .az-photo-viewer-prev:is(:hover,:focus-visible),.az-photo-viewer .az-photo-viewer-next:is(:hover,:focus-visible){transform:translateY(-50%)}
.az-photo-viewer-counter{
  position:absolute;
  left:24px;
  bottom:17px;
  margin:0;
  color:#e0c69d;
  font:400 .7rem/1.5 'AZ Mono','IBM Plex Mono',monospace;
  letter-spacing:.12em;
}

@media(max-width:900px){
  .az-photo-intro{grid-template-columns:140px minmax(0,1fr);gap:35px}
  .az-photo-grid{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:43px}
  .az-photo-card,.az-photo-card:nth-child(n){grid-column:span 3;margin-top:0}
  .az-photo-card:nth-child(4n + 2){margin-top:32px}
  .az-photo-card:last-child{grid-column:2 / span 4;margin-top:0}
}
@media(max-width:650px){
  .az-artworks .az-art-details-after-photo{padding-top:48px}
  .az-photo-section{padding:67px 0 76px}
  .az-photo-intro{display:block;padding-bottom:34px}
  .az-photo-side{flex-direction:row;justify-content:space-between;gap:16px;padding:0 0 15px;border-left:0;border-bottom:1px solid rgba(216,178,126,.34)}
  .az-photo-intro-copy{padding-top:29px}
  .az-photo-intro-copy h2{font-size:clamp(3.15rem,13vw,5rem);letter-spacing:-.06em}
  .az-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:13px;row-gap:30px}
  .az-photo-card,.az-photo-card:nth-child(n){grid-column:auto;margin-top:0;padding:5px 5px 0;box-shadow:5px 7px 0 rgba(1,20,25,.29)}
  .az-photo-card:nth-child(4n + 2){margin-top:24px}
  .az-photo-card:last-child{grid-column:1 / -1;width:75%;justify-self:center;margin-top:6px}
  .az-photo-card::after{inset:5px 5px 29px}
  .az-photo-card-no{min-height:29px;font-size:.58rem}
  .az-photo-viewer{width:calc(100vw - 14px);height:calc(100dvh - 14px);padding:54px 15px 57px}
  .az-photo-viewer-image{max-height:calc(100dvh - 145px)}
  .az-photo-viewer-prev,.az-photo-viewer-next{top:auto;bottom:6px;transform:none}
  .az-photo-viewer-prev{left:auto;right:68px}
  .az-photo-viewer-next{right:12px}
  .az-photo-viewer .az-photo-viewer-prev:is(:hover,:focus-visible),.az-photo-viewer .az-photo-viewer-next:is(:hover,:focus-visible){transform:none}
  .az-photo-viewer-counter{left:15px;bottom:18px}
}
@media(max-width:359px){
  .az-photo-side{font-size:.52rem;letter-spacing:.09em}
  .az-photo-intro-copy h2{font-size:3rem}
  .az-photo-grid{column-gap:10px}
  .az-photo-card-no{font-size:.52rem}
}
@media(prefers-reduced-motion:reduce){
  .az-photo-card,.az-photo-card img,.az-photo-card::after,.az-photo-viewer button{transition:none!important}
  .az-photo-card:is(:hover,:focus-visible),.az-photo-card:is(:hover,:focus-visible) img{transform:none}
}
html.motion-off .az-photo-card,html.motion-off .az-photo-card img,html.motion-off .az-photo-card::after,html.motion-off .az-photo-viewer button{transition:none!important}
html.motion-off .az-photo-card:is(:hover,:focus-visible),html.motion-off .az-photo-card:is(:hover,:focus-visible) img{transform:none}