/*
  Shared portfolio content styles.
  Desktop and mobile spacing values live in their page-specific stylesheets.
*/

@font-face {
  font-family: "Portfolio Didot";
  src:
    url("../fonts/Didot HTF M64 Medium Italic.woff2") format("woff2"),
    url("../fonts/Didot HTF M64 Medium Italic.woff") format("woff");
  font-display: swap;
  font-style: italic;
  font-weight: 400;
}

@font-face {
  font-family: "Portfolio Gotham Light";
  src:
    url("../fonts/Gotham-Light.woff2") format("woff2"),
    url("../fonts/Gotham-Light.woff") format("woff");
  font-display: swap;
  font-style: normal;
  font-weight: 300;
}

@font-face {
  font-family: "Portfolio Gotham XLight";
  src:
    url("../fonts/Gotham-XLight.woff2") format("woff2"),
    url("../fonts/Gotham-XLight.woff") format("woff");
  font-display: swap;
  font-style: normal;
  font-weight: 200;
}

@font-face {
  font-family: "Portfolio Gotham Medium";
  src:
    url("../fonts/Gotham-Medium.woff2") format("woff2"),
    url("../fonts/Gotham-Medium.woff") format("woff");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}

.portfolio-page-content {
  margin: 0 auto;
}

.portfolio-top__line {
  width: 100%;
  height: 1px;
  background: var(--site-gold);
}

.portfolio-name {
  margin: var(--portfolio-name-gap) 0 0;
  color: var(--site-gold);
  font-family: "Portfolio Didot", var(--site-font-title);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
}

.portfolio-copy {
  margin: 0;
  color: #a7a7a7;
  font-family: "Portfolio Gotham Light", var(--site-font-body);
  font-weight: 300;
  letter-spacing: 0;
}

.portfolio-copy--primary {
  margin-top: var(--portfolio-name-to-text-gap);
  line-height: var(--portfolio-primary-copy-line-height);
}

.portfolio-copy--secondary {
  margin-top: var(--portfolio-text-to-text-gap);
  text-transform: uppercase;
}

.portfolio-copy--continued {
  margin-top: var(--portfolio-text-to-text-gap);
  line-height: var(--portfolio-primary-copy-line-height);
}

.portfolio-copy a {
  color: inherit;
}

.portfolio-artworks {
  display: flex;
  flex-direction: column;
  gap: var(--portfolio-artwork-gap);
  margin-top: var(--portfolio-top-bottom-gap);
}

.portfolio-artwork {
  width: 100%;
}

.portfolio-artwork__name {
  margin: 0 0 var(--portfolio-artwork-name-gap);
  color: var(--site-text);
  font-family: "Portfolio Gotham Light", var(--site-font-body);
  font-size: 20px;
  font-weight: 300;
  line-height: 24px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.portfolio-media-stack {
  display: flex;
  flex-direction: column;
  gap: var(--portfolio-media-gap);
  width: 100%;
}

.portfolio-media,
.portfolio-media img,
.portfolio-media video {
  width: 100%;
}

.portfolio-media img,
.portfolio-media video {
  height: auto;
}

.portfolio-media img {
  filter: brightness(1.04);
  outline: 1px solid #262626;
  outline-offset: -1px;
}

.portfolio-slideshow,
.portfolio-series {
  position: relative;
  overflow: hidden;
  background: var(--site-video-bg);
}

.portfolio-slideshow {
  --portfolio-fade-duration: 0.7s;
  aspect-ratio: var(--portfolio-slideshow-aspect, 1 / 1);
}

.portfolio-series {
  --portfolio-fade-duration: 0.5s;
  aspect-ratio: 330 / 250;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(124, 124, 124, 0.3);
}

.portfolio-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-position: center center;
  transition: opacity var(--portfolio-fade-duration, 0.5s) ease;
}

.portfolio-slide.is-active {
  opacity: 1;
}

.portfolio-slideshow .portfolio-slide {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

.portfolio-slideshow .portfolio-slide:not(:first-child) {
  object-fit: cover;
}

.portfolio-series .portfolio-slide {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

.portfolio-video video {
  cursor: pointer;
}

.portfolio-grid {
  display: flex;
  flex-direction: column;
  gap: var(--portfolio-grid-row-gap);
}

.portfolio-grid__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--portfolio-grid-column-gap);
  align-items: start;
}

.portfolio-grid__cell:empty {
  display: block;
}

.portfolio-caption {
  margin-top: 27px;
}

.portfolio-caption__lines {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.portfolio-caption__line {
  margin: 0;
  color: var(--site-text);
  font-family: "Portfolio Gotham XLight", var(--site-font-body);
  font-size: 20px;
  font-weight: 200;
  line-height: 28px;
  letter-spacing: 0;
  text-transform: lowercase;
}

.portfolio-inquire-group {
  margin-top: 34px;
}

.portfolio-caption__lines:empty + .portfolio-inquire-group {
  margin-top: 34px;
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-slide {
    transition: none;
  }
}