/* A photographic fashion portrait, revealed once by native scrolling. */
.photo-concept .fashion-portrait {
  position: absolute;
  inset: 0 0 0 auto;
  width: 58%;
  isolation: isolate;
  pointer-events: none;
  overflow: hidden;
  opacity: var(--story-mix, 0);
}
.photo-concept .fashion-backdrop {
  position: absolute;
  inset: 8% 3% 11% 19%;
  background: linear-gradient(135deg, #ad8bbe 0%, #785591 52%, #443649 100%);
  clip-path: polygon(5% 9%, 92% 0, 100% 92%, 0 100%);
  opacity: .57;
  transform: translateY(calc((1 - var(--portrait-enter)) * 20px)) rotate(calc((1 - var(--portrait-enter)) * -3deg));
}
.photo-concept .fashion-halftone {
  position: absolute;
  left: 4%;
  top: 18%;
  width: 44%;
  height: 61%;
  background: radial-gradient(circle, #c5a6d8 1px, transparent 1.3px) 0 0 / 8px 8px;
  opacity: .30;
  -webkit-mask-image: radial-gradient(ellipse, #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse, #000 15%, transparent 72%);
  transform: translateX(calc((1 - var(--portrait-enter)) * -15px));
}
.photo-concept .fashion-outline {
  position: absolute;
  inset: 14% 7% 10% 24%;
  border: 1px solid #d5b792;
  opacity: .40;
  transform: rotate(-6deg) translateY(calc((1 - var(--portrait-enter)) * 12px));
}
.photo-concept .fashion-face {
  position: absolute;
  inset: 5% 4% 2% 7%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(calc((1 - var(--portrait-enter)) * 24px)) scale(calc(.975 + var(--portrait-enter) * .025));
  transform-origin: 62% 58%;
}
.photo-concept .fashion-face img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: .84;
  filter: grayscale(1) contrast(1.025);
  animation: none;
  transform: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 6%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent, #000 6%, #000 88%, transparent 100%);
}
.photo-concept .fashion-caption {
  position: absolute;
  top: 25%;
  right: 4%;
  color: #e2cdb9;
  font: 500 9px/1.3 Arial, Helvetica, sans-serif;
  letter-spacing: .23em;
  writing-mode: vertical-rl;
  opacity: .74;
}
@media (min-width: 761px) and (max-width: 1100px) {
  .photo-concept .fashion-portrait { width: 57%; }
  .photo-concept .fashion-face { inset: 8% 1% 7% 2%; }
  .photo-concept .fashion-backdrop { inset: 15% 2% 18% 12%; }
  .photo-concept .fashion-outline { inset: 18% 6% 17% 17%; }
  .photo-concept .fashion-caption { right: 3%; top: 29%; font-size: 8px; }
}
@media (max-width: 760px) {
  .photo-concept .fashion-portrait { inset: 0; width: 100%; }
  .photo-concept .fashion-face {
    inset: 3% 12% 1%;
    transform: translateY(calc((1 - var(--portrait-enter)) * 12px)) scale(calc(.98 + var(--portrait-enter) * .02));
  }
  .photo-concept .fashion-backdrop { inset: 7% 16% 10% 23%; opacity: .57; }
  .photo-concept .fashion-outline { inset: 14% 20% 9% 28%; }
  .photo-concept .fashion-halftone { left: 5%; top: 11%; width: 45%; height: 67%; background-size: 7px 7px; }
  .photo-concept .fashion-caption { top: 20%; right: 12%; font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-concept .fashion-face,
  .photo-concept .fashion-backdrop,
  .photo-concept .fashion-halftone,
  .photo-concept .fashion-outline { transform: none; }
}

/* In the philosophy, show the craft rather than repeat the close-up. */
.photo-concept .philosophy-grid .workshop-photo {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  transform: none;
}
.photo-concept .workshop-photo .workshop-photo-frame {
  aspect-ratio: 1;
  background: #302836;
  isolation: isolate;
}
.photo-concept .workshop-photo .workshop-photo-frame::before {
  inset: -12px -10px 12px 10px;
  border: 1px solid #a88bbb;
  background: none;
  transform: rotate(2deg);
  z-index: -1;
}
.photo-concept .workshop-photo .workshop-photo-frame::after {
  content: '';
  position: absolute;
  top: 26px;
  left: -19px;
  width: 68px;
  height: 82px;
  background: radial-gradient(#9776aa 1px, transparent 1.3px) 0 0 / 7px 7px;
  opacity: .36;
  z-index: -1;
  pointer-events: none;
}
.photo-concept .workshop-photo .workshop-photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right top;
  -webkit-mask-image: none;
  mask-image: none;
  filter: saturate(.91) contrast(1.02);
}
.photo-concept .workshop-photo figcaption { padding-top: 18px; }
.workshop-print-lilac,
.workshop-print-dots { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; }
.workshop-print-lilac { background: #b58acf; mix-blend-mode: screen; }
.workshop-print-dots { background: radial-gradient(#291931 1px, transparent 1.5px) 0 0 / 7px 7px; }
.photo-concept .workshop-photo-label {
  position: absolute;
  z-index: 4;
  left: 14px;
  right: 14px;
  bottom: 14px;
  padding: 12px 15px;
  color: #2c1c36;
  background: #e8d9f0f5;
  border-left: 3px solid #8754a3;
  box-shadow: 0 3px 16px #20152422;
  text-align: left;
}
.workshop-photo-label strong { display: block; font: 700 11px/1.4 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.workshop-photo-label span { display: block; margin-top: 3px; font: 400 12px/1.4 Arial, sans-serif; }
/* A diagonal print reveal follows scrolling; the settled photograph stays quiet. */
.photo-concept .workshop-photo-frame[data-reveal-ready] { background: #9976af; }
.photo-concept .workshop-photo .workshop-photo-frame[data-reveal-ready] img {
  opacity: var(--photo-opacity, 1);
  filter: grayscale(var(--photo-gray, 0)) saturate(.91) contrast(1.02);
  clip-path: polygon(0 0, var(--photo-edge, 140%) 0, calc(var(--photo-edge, 140%) - 18%) 100%, 0 100%);
  transform: translateX(var(--photo-shift, 0px));
}
.workshop-photo-frame[data-reveal-ready] .workshop-print-lilac {
  opacity: var(--photo-ink, 0);
  clip-path: polygon(calc(var(--photo-edge) - 15%) 0, calc(var(--photo-edge) + 4%) 0, calc(var(--photo-edge) - 14%) 100%, calc(var(--photo-edge) - 33%) 100%);
}
.workshop-photo-frame[data-reveal-ready] .workshop-print-dots {
  opacity: var(--photo-ink, 0);
  clip-path: polygon(calc(var(--photo-edge) - 27%) 0, calc(var(--photo-edge) - 8%) 0, calc(var(--photo-edge) - 26%) 100%, calc(var(--photo-edge) - 45%) 100%);
}
.motion-enabled .photo-concept .workshop-photo .workshop-photo-frame::before {
  transform: translateY(calc(8px - var(--scene, .5) * 12px)) rotate(calc(-1deg + var(--scene, .5) * 4deg));
}
@media (max-width: 760px) {
  .photo-concept .philosophy-grid .workshop-photo { max-width: 340px; width: calc(100% - 18px); margin: 35px auto 20px; }
  .photo-concept .workshop-photo .workshop-photo-frame::before { inset: -9px -7px 9px 7px; }
  .photo-concept .workshop-photo .workshop-photo-frame::after { left: -13px; width: 54px; height: 65px; background-size: 6px 6px; }
  .photo-concept .workshop-photo figcaption strong { font-size: 16px; }
  .photo-concept .workshop-photo figcaption>div>span { font-size: 11px; }
  .photo-concept .workshop-photo-label { left: 10px; right: 10px; bottom: 10px; padding: 9px 11px; }
  .workshop-photo-label strong { font-size: 10px; }
  .workshop-photo-label span { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-concept .workshop-photo .workshop-photo-frame[data-reveal-ready] img { opacity: 1; clip-path: none; transform: none; filter: saturate(.91) contrast(1.02); }
  .workshop-print-lilac, .workshop-print-dots { display: none; }
  .photo-concept .workshop-photo .workshop-photo-frame::before { transform: rotate(2deg); }
}