/* Portfolio showpiece: campaign-scale masthead and art-directed project index. */

body.ni-portfolio .section-intro {
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr) !important;
  grid-template-rows: auto auto auto !important;
  gap: 20px clamp(42px, 5vw, 88px) !important;
  align-content: center !important;
  min-height: 100svh !important;
  padding: clamp(130px, 11vw, 176px) clamp(24px, 5.4vw, 88px) clamp(60px, 6vw, 92px) !important;
}

body.ni-portfolio .section-intro > .label {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: end !important;
  margin-bottom: 8px;
}

body.ni-portfolio .ni-portfolio-title {
  z-index: 2;
  grid-column: 1;
  grid-row: 2;
  max-width: 820px;
  margin: 0;
  color: var(--ni-paper);
  font-family: Reckless, "Times New Roman", serif;
  font-size: clamp(62px, 6.2vw, 108px);
  font-weight: 300;
  line-height: 0.84;
  letter-spacing: -0.058em;
}

body.ni-portfolio .ni-portfolio-title span {
  display: block;
  margin-top: 0.18em;
  color: var(--ni-paper);
  white-space: nowrap;
}

body.ni-portfolio .section-intro > .h2.intro {
  grid-column: 1 !important;
  grid-row: 3 !important;
  align-self: start !important;
  max-width: 590px !important;
  margin-top: 14px !important;
  color: rgba(243, 240, 233, 0.68) !important;
  font-family: Neue Haas Grotesk, Arial, sans-serif !important;
  font-size: clamp(16px, 1.18vw, 20px) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.012em !important;
  text-wrap: pretty;
}

body.ni-portfolio .ni-masthead-gallery {
  grid-column: 2 !important;
  grid-row: 1 / span 3 !important;
  align-self: center;
  height: min(68svh, 760px);
}

body.ni-portfolio .ni-masthead-card:nth-child(1) {
  top: 0;
  right: 1%;
  width: 70%;
  height: 72%;
}

body.ni-portfolio .ni-masthead-card:nth-child(2) {
  bottom: 0;
  left: -2%;
  width: 52%;
  height: 47%;
}

body.ni-portfolio .ni-masthead-card:nth-child(3) {
  right: -2%;
  bottom: -1%;
  width: 35%;
  height: 35%;
}

body.ni-portfolio .section::before {
  content: "Selected work / 01?06";
  display: block;
  margin-bottom: clamp(62px, 8vw, 118px);
  padding-bottom: 15px;
  border-bottom: 1px solid var(--ni-line);
  color: var(--ni-clay);
  font: 500 10px/1 Neue Haas Grotesk, Arial, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  body.ni-portfolio .section-intro {
    grid-template-columns: minmax(0, 1fr) minmax(350px, 0.82fr) !important;
    column-gap: 34px !important;
    padding-right: 34px !important;
    padding-left: 34px !important;
  }

  body.ni-portfolio .ni-portfolio-title {
    font-size: clamp(56px, 6.4vw, 72px);
  }
}

@media (max-width: 767px) {
  body.ni-portfolio .section-intro {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    min-height: 100svh !important;
    padding: 126px 18px 30px !important;
  }

  body.ni-portfolio .section-intro > .label {
    align-self: flex-start !important;
    margin-bottom: 12px;
  }

  body.ni-portfolio .ni-portfolio-title {
    max-width: 100%;
    font-size: clamp(50px, 14.4vw, 69px);
    line-height: 0.88;
  }

  body.ni-portfolio .ni-portfolio-title span {
    max-width: 9ch;
    white-space: normal;
  }

  body.ni-portfolio .section-intro > .h2.intro {
    max-width: 34ch !important;
    margin-top: 14px !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  body.ni-portfolio .ni-masthead-gallery {
    flex: 0 0 auto;
    width: 100%;
    height: 34svh !important;
    min-height: 290px;
    margin-top: 24px;
  }

  body.ni-portfolio .section::before {
    margin-bottom: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.ni-portfolio .ni-masthead-card {
    transform: rotate(var(--ni-rotate, 0deg)) !important;
  }
}