/* V3.1 About photo carousel */
.portrait-panel { overflow: hidden; }
.about-photo {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 48%;
  filter: saturate(.88) contrast(1.04) brightness(.78);
  opacity: 0;
  transition: opacity 1.2s ease;
}
.about-photo.is-visible { opacity: 1; }
.about-photo--secondary { z-index: 0; }
.portrait-photo-shade {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4,5,9,.08) 0%, rgba(4,5,9,.08) 55%, rgba(4,5,9,.72) 100%),
    linear-gradient(180deg, rgba(4,5,9,.05), rgba(4,5,9,.18));
}
.about-carousel-nav,
.about-carousel-control {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(5,6,10,.64);
  color: rgba(255,255,255,.86);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.about-carousel-nav {
  bottom: 14px;
  width: 38px;
  height: 38px;
  font: 400 30px/1 system-ui, sans-serif;
  opacity: .52;
}
.about-carousel-nav--previous { left: 14px; }
.about-carousel-nav--next { left: 60px; }
.about-carousel-control {
  right: 14px;
  bottom: 14px;
  width: 34px;
  height: 34px;
  font: 700 12px/1 system-ui, sans-serif;
  opacity: .46;
}
.portrait-panel:hover .about-carousel-nav,
.about-carousel-nav:hover,
.about-carousel-nav:focus-visible,
.about-carousel-control:hover,
.about-carousel-control:focus-visible {
  opacity: 1;
  border-color: rgba(169,239,143,.5);
  background: rgba(5,6,10,.86);
}
.about-carousel-nav:hover,
.about-carousel-nav:focus-visible { transform: scale(1.05); }
.about-carousel-nav:active { transform: scale(.96); }
.about-carousel-nav[hidden],
.about-carousel-control[hidden] { display: none; }
.portrait-panel.has-photo::after { display: none; }
.portrait-panel:not(.has-photo) .about-photo,
.portrait-panel:not(.has-photo) .portrait-photo-shade { display: none; }
.portrait-panel.has-photo .portrait-content { display: none; }
@media (prefers-reduced-motion: reduce) {
  .about-photo { transition: none; }
  .about-carousel-nav,
  .about-carousel-control { transition: none; }
}
@media (max-width: 1260px) {
  .portrait-panel.has-photo { min-height: clamp(300px, 44vw, 520px); }
  .portrait-panel.has-photo .portrait-photo-shade {
    background:
      linear-gradient(180deg, rgba(4,5,9,.05) 0%, rgba(4,5,9,.06) 62%, rgba(4,5,9,.58) 100%),
      linear-gradient(90deg, rgba(4,5,9,.08), rgba(4,5,9,.28));
  }
}
@media (max-width: 700px) {
  .about-carousel-nav {
    bottom: 10px;
    width: 34px;
    height: 34px;
    font-size: 27px;
    opacity: .72;
  }
  .about-carousel-nav--previous { left: 10px; }
  .about-carousel-nav--next { left: 50px; }
}