/* Selective colour, deliberate image framing and tactile interaction. */
.az-underground .ug-image-plate img{
  object-position:right center;
  transform-origin:right center;
  transform:scale(1.76);
  animation:none!important;
}
.az-underground .ug-index-italic{color:#a76445}
.az-underground .ug-route-three .ug-route-core h3{color:#a76445;transition:color .3s ease,transform .3s ease}
.az-underground .ug-route-three:is(:hover,:focus-visible) .ug-route-core h3{color:#f1c49a;transform:translateX(4px)}
.az-underground .ug-statement em{color:#df9a72}
.site-header .wordmark-role{font-family:'AZ Gruppo','Gruppo',sans-serif;font-size:.68rem;letter-spacing:.19em;color:#e6c8a5}
.site-header .wordmark-role::before{flex-basis:25px;width:25px;height:9px}
@media(max-width:610px){.site-header .wordmark-role{font-size:.54rem;letter-spacing:.14em}}
.az-underground .ug-outro{border-top-width:1px}
.az-underground .ug-outro-side p{max-width:36ch}

.hero-stage{
  background-image:url('assets/hoodie_az_concept.webp');
  width:82%;
  background-position:center center;
  filter:saturate(.72) brightness(.76) contrast(1.01);
  transform:translate3d(var(--stage-x,0px),var(--stage-y,0px),0);
}
.hero-darken{background:linear-gradient(90deg,#032b34 0%,rgba(3,39,47,.97) 34%,rgba(3,36,44,.63) 60%,rgba(2,27,35,.2) 100%)}
.reference-bourges{font-family:'AZ Mono','IBM Plex Mono',monospace;font-size:clamp(.72rem,1vw,1rem);letter-spacing:.08em;line-height:1.25}
.reference-vuelta{font-family:'AZ Gruppo','Gruppo',sans-serif;font-size:clamp(1.35rem,2vw,2rem);letter-spacing:.06em}
.az-portfolio-heading{border-bottom:1px solid rgba(213,172,111,.28);padding-bottom:25px}
.az-portfolio-teaser{margin-top:28px}

.az-artworks .az-art-hero .az-art-title{
  color:#f6f1e7;
  font-family:'Space Grotesk','Inter Display',sans-serif!important;
  font-size:clamp(5rem,9vw,10rem);
  font-weight:300;
  line-height:.92;
  letter-spacing:-.095em;
  text-transform:none;
  white-space:nowrap;
  transform:scaleX(2.05)!important;
  transform-origin:left center;
}
.az-artworks .az-art-title span{
  color:#f6f1e7;
  font-family:'AZ Gruppo','Gruppo',sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:-.065em;
  -webkit-text-stroke:1.1px #fff8ed;
  filter:drop-shadow(2px 1px 0 rgba(201,126,92,.28));
}
.az-artworks .az-art-hero:after{background:#ab6a4e}

.az-about .az-about-image.az-about-portrait{
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:440px;
  padding:clamp(26px,3vw,44px) 24px 22px;
  background:#0b3038;
  border:1px solid rgba(221,187,137,.25);
}
.az-about .az-about-photo-stack{position:relative;width:100%;max-width:390px}
.az-about .az-about-image.az-about-portrait img{
  display:block;
  max-width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  filter:none;
}
.az-about .az-about-image.az-about-portrait .az-about-photo-work{
  width:78%;
  box-shadow:12px 14px 0 rgba(1,23,30,.7);
}
.az-about .az-about-image.az-about-portrait .az-about-photo-close{
  position:absolute;
  right:1%;
  bottom:4%;
  width:40%;
  border:5px solid #0b3038;
  box-shadow:0 14px 35px rgba(1,18,24,.6);
  transform:rotate(3deg);
}
.az-about .az-about-image.az-about-portrait figcaption{
  align-self:flex-start;
  margin:30px 0 0;
  color:#d7b891;
  font:400 .68rem/1.5 'IBM Plex Mono',monospace;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.wordmark{position:relative}
.wordmark:before{
  content:'';
  position:absolute;
  left:-7px;
  top:50%;
  width:82px;
  height:82px;
  border:1px solid rgba(216,161,105,.8);
  border-radius:50%;
  opacity:0;
  transform:translateY(-50%) scale(.7);
  transition:opacity .55s ease,transform .65s cubic-bezier(.18,.7,.2,1);
  pointer-events:none;
}
.wordmark:is(:hover,:focus-visible):before{opacity:.65;transform:translateY(-50%) scale(1.12)}
.wordmark:is(:hover,:focus-visible) .wordmark-emblem{transform:rotate(-11deg) scale(1.1);filter:drop-shadow(0 0 15px rgba(222,155,97,.56))}
.wordmark:active .wordmark-emblem{transform:rotate(-5deg) scale(.97)}

@media(min-width:701px) and (max-width:1100px){
  .az-artworks .az-art-hero .az-art-title{transform:scaleX(1.55)!important}
}
@media(max-width:700px){
  .az-underground .ug-image-plate img{transform:scale(1.18)}
  .az-about .az-about-image.az-about-portrait .az-about-photo-work{width:100%}
  .az-about .az-about-image.az-about-portrait .az-about-photo-close{width:38%;right:-1%;bottom:3%}
  .hero-stage{width:150%;right:-41%!important;background-position:59% center}
  .hero-darken{background:linear-gradient(90deg,rgba(3,39,47,.91),rgba(2,30,38,.46)),linear-gradient(0deg,rgba(2,28,37,.48),transparent 65%)}
  .az-artworks .az-art-hero .az-art-title{font-size:clamp(3.1rem,13vw,5.8rem);transform:scaleX(1.42)!important}
  .wordmark:before{width:58px;height:58px;left:-5px}
}
@media(max-width:359px){
  .az-artworks .az-art-hero .az-art-title{transform:scaleX(1.2)!important}
}
@media(prefers-reduced-motion:reduce){
  .wordmark:before,.wordmark-emblem,.az-underground .ug-route-three .ug-route-core h3{transition:none!important}
  .wordmark:is(:hover,:focus-visible) .wordmark-emblem{transform:none}
}
html.motion-off .wordmark:before,html.motion-off .wordmark-emblem,html.motion-off .ug-route-three .ug-route-core h3{transition:none!important}
html.motion-off .wordmark:is(:hover,:focus-visible) .wordmark-emblem{transform:none}