/* Matthias as the face of the studio: an editorial portrait from his own reference photo. */
.a-about-portrait-wrap { min-width: 0; }

.a-about-portrait {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  min-height: 520px;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  border: 1px solid #504c5e;
  border-radius: 6px 6px 90px 6px;
  background: radial-gradient(circle at 52% 30%, #58496d 0, #262331 38%, #13131b 74%);
  box-shadow: 22px 24px 0 #d2cad8;
  color: #f9f8f1;
}

.a-about-portrait::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 0 72%;
  background: linear-gradient(#0d1327c9, transparent);
  pointer-events: none;
}

.a-about-portrait::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 62% 0 0;
  background: linear-gradient(transparent, #101119d9 90%);
  pointer-events: none;
}

.a-about-portrait img {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center 41%;
}

.a-about-portrait-top,
.a-about-portrait-bottom {
  position: absolute;
  z-index: 3;
  left: 25px;
  right: 25px;
}

.a-about-portrait-top {
  top: 23px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #e8efdf;
  font: 700 10px/1.4 Arial, sans-serif;
  letter-spacing: .14em;
}

.a-about-portrait-top span:last-child { color: #d7ff52; white-space: nowrap; }

.a-about-portrait-bottom {
  bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.a-about-portrait-bottom strong {
  font: 900 clamp(43px, 4.6vw, 70px)/.9 'Arial Black', Arial, sans-serif;
  letter-spacing: -.075em;
}

.a-about-portrait-bottom span {
  color: #d9ff64;
  font: 700 10px/1.5 Arial, sans-serif;
  letter-spacing: .19em;
}

.a-about .a-about-portrait-credit {
  margin: 36px 0 0;
  max-width: none;
  color: #5a5861;
  font: 12px/1.45 Arial, sans-serif;
}

@media (max-width: 900px) {
  .a-about-portrait {
    min-height: 0;
    max-width: 460px;
    margin-inline: auto;
  }
  .a-about .a-about-portrait-credit { max-width: 460px; margin-inline: auto; }
}

@media (max-width: 600px) {
  .a-about-portrait {
    max-width: 340px;
    border-radius: 5px 5px 55px 5px;
    box-shadow: 12px 13px 0 #d2cad8;
  }
  .a-about-portrait-top,
  .a-about-portrait-bottom { left: 17px; right: 17px; }
  .a-about-portrait-top { top: 15px; font-size: 9px; }
  .a-about-portrait-bottom { bottom: 18px; }
  .a-about-portrait-bottom strong { font-size: clamp(39px, 11vw, 56px); }
  .a-about-portrait-bottom span { font-size: 8px; }
  .a-about .a-about-portrait-credit { max-width: 340px; margin-top: 26px; }
}