/* Three supplied works, kept uncropped and separate from the photography archive. */
.az-visual-section{
  position:relative;
  isolation:isolate;
  scroll-margin-top:96px;
  padding:clamp(76px,8vw,126px) 0 clamp(85px,9vw,142px);
  background:#061e22;
  border-block:1px solid rgba(222,181,130,.25);
}
.az-visual-section::before{
  content:'';
  position:absolute;
  top:0;
  left:var(--page-gutter);
  width:clamp(54px,9vw,150px);
  height:3px;
  background:#a7533f;
}
.az-visual-intro{
  display:grid;
  grid-template-columns:minmax(140px,1fr) minmax(0,3.7fr);
  gap:clamp(26px,5.5vw,90px);
  padding-bottom:clamp(39px,5vw,78px);
}
.az-visual-side{
  display:flex;
  flex-direction:column;
  gap:14px;
  align-self:start;
  padding:11px 0 0 19px;
  border-left:1px solid #a75a47;
  color:#d7b18c;
  font:400 .61rem/1.55 'AZ Mono','IBM Plex Mono',monospace;
  letter-spacing:.16em;
  white-space:nowrap;
}
.az-visual-side span:last-child{color:#a9c0ba}
.az-visual-intro-copy .az-serial{margin:0 0 13px;color:#d8a67e}
.az-visual-intro-copy .az-serial::before{background:#a7533f}
.az-visual-intro-copy h2{
  margin:0 0 16px;
  color:#f0e8dc;
  font:400 clamp(3.8rem,8vw,9rem)/.96 'AZ Gruppo','Gruppo',sans-serif;
  letter-spacing:-.075em;
}
.az-visual-intro-copy h2 i{color:#ba6046;font-weight:400}
.az-visual-intro-copy>p:last-child{
  max-width:61ch;
  margin:0;
  color:#cbd6d0;
  font-size:clamp(.98rem,1.25vw,1.17rem);
  line-height:1.75;
}
.az-visual-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(15px,2vw,30px);
  align-items:start;
}
.az-visual-card{
  position:relative;
  display:block;
  grid-column:span 4;
  min-width:0;
  padding:7px 7px 0;
  overflow:hidden;
  color:#e6d3b6;
  text-decoration:none;
  background:#08292e;
  border:1px solid rgba(210,178,140,.34);
  box-shadow:7px 9px 0 rgba(0,12,15,.34);
  cursor:zoom-in;
  transition:transform .55s cubic-bezier(.2,.8,.2,1),border-color .35s ease,box-shadow .55s ease;
}
.az-visual-card:nth-child(1){grid-column:span 5}
.az-visual-card:nth-child(2){grid-column:span 3;margin-top:clamp(33px,6vw,88px)}
.az-visual-card:nth-child(3){grid-column:span 4;margin-top:clamp(10px,2vw,30px)}
.az-visual-card img{
  display:block;
  width:100%;
  height:auto;
  background:#082127;
  transition:filter .45s ease,transform .7s cubic-bezier(.2,.8,.2,1);
}
.az-visual-card::after{
  content:'';
  position:absolute;
  inset:7px 7px 32px;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(90deg,transparent 0 44%,rgba(238,209,154,.18) 50%,transparent 56%);
  mix-blend-mode:screen;
}
.az-visual-card-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  min-height:33px;
  padding:6px 2px 5px;
  color:#d9ba91;
  font:400 .62rem/1.3 'AZ Mono','IBM Plex Mono',monospace;
  letter-spacing:.15em;
}
.az-visual-card-meta span:last-child{color:#a9c2bc}
.az-visual-card:is(:hover,:focus-visible){
  border-color:#dcaa80;
  box-shadow:12px 15px 0 rgba(0,12,15,.43);
  transform:translate(-3px,-5px);
}
.az-visual-card:is(:hover,:focus-visible) img{filter:contrast(1.04);transform:scale(1.012)}
.az-visual-card:is(:hover,:focus-visible)::after{animation:az-visual-scan .6s steps(3,end) 1}
.az-visual-card:focus-visible{outline:2px solid #f2cf9c;outline-offset:5px}
@keyframes az-visual-scan{
  0%{opacity:0;transform:translateX(-38%)}
  25%{opacity:.65;transform:translateX(-9%)}
  58%{opacity:.25;transform:translateX(10%)}
  100%{opacity:0;transform:translateX(38%)}
}
.az-visual-viewer{background:#061b1f;border-color:#bb8167}
.az-visual-viewer::backdrop{background:rgba(0,10,13,.94)}
.az-visual-viewer .az-photo-viewer-image{box-shadow:0 16px 50px rgba(0,5,7,.54)}

@media(max-width:900px){
  .az-visual-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .az-visual-card:nth-child(n){grid-column:auto;margin-top:0}
  .az-visual-card:nth-child(2){margin-top:34px}
  .az-visual-card:nth-child(3){grid-column:1 / -1;width:68%;justify-self:center}
}
@media(max-width:650px){
  .az-visual-section{padding:68px 0 78px}
  .az-visual-intro{display:block;padding-bottom:35px}
  .az-visual-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-visual-intro-copy{padding-top:29px}
  .az-visual-intro-copy h2{font-size:clamp(3.15rem,13vw,5rem);letter-spacing:-.06em}
  .az-visual-grid{grid-template-columns:1fr;row-gap:27px}
  .az-visual-card:nth-child(n){grid-column:1;width:100%;margin-top:0}
  .az-visual-card:nth-child(2){width:87%;justify-self:end}
  .az-visual-card:nth-child(3){width:92%;justify-self:start}
}
@media(max-width:359px){
  .az-visual-side{font-size:.52rem;letter-spacing:.09em}
  .az-visual-intro-copy h2{font-size:3rem}
}
@media(prefers-reduced-motion:reduce){
  .az-visual-card,.az-visual-card img{transition:none!important}
  .az-visual-card:is(:hover,:focus-visible),.az-visual-card:is(:hover,:focus-visible) img{transform:none}
  .az-visual-card::after{animation:none!important}
}
html.motion-off .az-visual-card,html.motion-off .az-visual-card img{transition:none!important}
html.motion-off .az-visual-card:is(:hover,:focus-visible),html.motion-off .az-visual-card:is(:hover,:focus-visible) img{transform:none}
html.motion-off .az-visual-card::after{animation:none!important}