.portfolio-page {
  min-height: 100vh;
  overflow-x: hidden;
  background: #ffffff;
  color: #111111;
  font-family: "Passion Colin Title", sans-serif;
}

.portfolio-stage {
  width: min(100%, 1512px);
  margin-inline: auto;
}

.portfolio-site-header {
  padding-top: 3.97vw;
  text-align: center;
}

.portfolio-site-title {
  position: static;
  display: inline-block;
  margin: 0;
  padding-left: 0.43em;
  transform: none;

  font-family: "Passion Colin Title", sans-serif;
  font-size: clamp(30px, 3.44vw, 52px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.43em;
  text-transform: none;
  white-space: nowrap;
}

.portfolio-site-title:hover,
.portfolio-site-title:focus-visible {
  opacity: 0.5;
}

.portfolio-main {
  width: min(92%, 1200px);
  margin: clamp(58px, 5.2vw, 80px) auto 0;
  padding-bottom: 130px;
}

.portfolio-heading,
.instruction-title,
.early-works-heading {
  margin: 0;
  font-family: "Passion Colin Title", sans-serif;
  font-weight: 400;
  text-transform: none;
}

.portfolio-heading {
  margin-left: 4%;
  margin-bottom: clamp(22px, 2vw, 32px);
  font-size: clamp(25px, 2.35vw, 36px);
  letter-spacing: 0.36em;
}

.portfolio-splash {
  position: relative;
  width: 100%;
}

.portfolio-splash > img {
  width: 100%;
  height: auto;
}

.splash-title {
  position: absolute;
  top: 5.5%;
  left: 17.5%;
  margin: 0;
  color: #ffffff;

  font-family: "Passion Colin Nav", sans-serif;
  font-size: clamp(20px, 2.25vw, 34px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-align: left;
}

.splash-title span {
  display: block;
}

.splash-title span:nth-child(2) {
  margin-left: 2.15em;
}

.featured-work-section {
  display: grid;
  grid-template-columns: 54% 41%;
  column-gap: 5%;
  align-items: start;
  width: 84%;
  margin: clamp(68px, 5.8vw, 88px) auto 0;
}

.instruction-title {
  min-height: 2.5em;
  font-size: clamp(19px, 1.72vw, 26px);
  line-height: 1.06;
  letter-spacing: 0.30em;
  text-align: center;
}

.instruction-title span {
  display: block;
}

.object-column .instruction-title,
.second-instruction {
  white-space: nowrap;
}

.object-column .instruction-title {
  min-height: 0;
}

.object-column .instruction-title span {
  display: inline;
}

.object-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "jesus jesus"
    "sebastian breast"
    "orb nuts";
  align-items: start;
  column-gap: 3.5%;
  margin-top: clamp(32px, 2.5vw, 39px);
}

.object-card,
.notes-thumbnail,
.early-card {
  display: block;
  position: relative;
  z-index: 1;
}

.object-card:hover,
.object-card:focus-visible,
.notes-thumbnail:hover,
.notes-thumbnail:focus-visible,
.early-card:hover,
.early-card:focus-visible {
  opacity: 0.72;
}

.object-card img,
.notes-thumbnail img,
.early-card img {
  width: 100%;
  height: auto;
}

.object-card--jesus {
  grid-area: jesus;
  z-index: 3;
  margin-bottom: -2%;
}

.object-card--sebastian {
  grid-area: sebastian;
  width: 96%;
  justify-self: end;
  z-index: 2;
  margin-top: 8%;
  transform: translateY(2.8cqw);
}

.object-card--breast {
  grid-area: breast;
  width: 112%;
  justify-self: start;
  z-index: 2;
  margin-top: 4%;
  transform: translateY(4.3cqw);
}

.object-card--orb {
  grid-area: orb;
  width: 88%;
  justify-self: start;
  z-index: 4;
  margin-top: 24%;
  transform: translateY(2.8cqw);
}

.object-card--nuts {
  grid-area: nuts;
  width: 92%;
  justify-self: end;
  z-index: 5;
  margin-top: 15%;
  transform: translateY(2.8cqw);
}

.notes-thumbnail {
  width: 94%;
  margin: clamp(2px, 0.3vw, 6px) auto 0;
}

.portfolio-divider {
  width: 100%;
  margin: clamp(48px, 4.1vw, 62px) 0 clamp(56px, 4.8vw, 72px);
  border: 0;
  border-top: 1px solid rgba(17, 17, 17, 0.58);
}

.early-works-section {
  width: 86%;
  margin-inline: auto;
}

.early-works-heading {
  margin-left: 4%;
  font-size: clamp(25px, 2.25vw, 34px);
  letter-spacing: 0.36em;
}

.postcard-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.8%;
  margin-top: clamp(38px, 3.4vw, 52px);
}

.postcard-row img {
  width: 100%;
  height: auto;
}

.second-instruction {
  min-height: 0;
  margin-top: clamp(58px, 5vw, 76px);
}

.early-work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "earcuff spearband"
    "condensation sunglass";
  column-gap: 8%;
  row-gap: 7%;
  align-items: start;
  margin-top: clamp(40px, 3.3vw, 50px);
}

.early-card--earcuff {
  grid-area: earcuff;
  width: 72%;
  justify-self: center;
}

.early-card--spearband {
  grid-area: spearband;
  width: 88%;
  justify-self: end;
  transform: translateX(-5%);
}

.early-card--condensation {
  grid-area: condensation;
  align-self: start;
  margin-top: 18%;
}

.early-card--sunglass {
  grid-area: sunglass;
  width: 72%;
  justify-self: start;
  margin-top: -6%;
}

@media (max-width: 700px) {
  .portfolio-stage {
    width: 100%;
  }

  .portfolio-site-header {
    padding-top: 10.2vw;
  }

  .portfolio-site-title {
    font-size: 8.68vw;
    letter-spacing: 0.43em;
  }

  .portfolio-main {
    width: calc(100% - 28px);
    margin-top: 13vw;
    padding-bottom: 100px;
  }

  .portfolio-heading {
    margin-left: 2%;
    margin-bottom: 8vw;
    font-size: 7vw;
  }

  .splash-title {
    top: 4%;
    left: 48%;
    transform: translateX(-50%);
    font-size: 3.9vw;
    letter-spacing: 0.3em;
    white-space: nowrap;
  }

  .featured-work-section {
    display: block;
    width: 100%;
    margin-top: 11vw;
  }

  .instruction-title {
    min-height: 0;
    font-size: 5.2vw;
    line-height: 1.04;
  }

  .object-column .instruction-title,
  .second-instruction {
    font-size: 3.65vw;
    letter-spacing: 0.27em;
  }

  .object-collage {
    margin-top: 10vw;
  }

  .notes-column {
    margin-top: 18vw;
  }

  .notes-thumbnail {
    width: 88%;
    margin: 9vw auto 0;
  }

  .portfolio-divider {
    margin: 16vw 0 14vw;
  }

  .early-works-section {
    width: 100%;
  }

  .early-works-heading {
    margin-left: 2%;
    font-size: 6.7vw;
    line-height: 1.2;
  }

  .postcard-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 3.5vw;
    width: 82%;
    margin: 10vw auto 0;
  }

  .second-instruction {
    margin-top: 12vw;
  }

  .early-work-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "earcuff"
      "spearband"
      "sunglass"
      "condensation";
    row-gap: 14vw;
    width: 88%;
    margin: 10vw auto 0;
  }

  .early-card--earcuff,
  .early-card--spearband,
  .early-card--sunglass,
  .early-card--condensation {
    width: 100%;
    margin: 0;
    justify-self: stretch;
  }
}

.splash-title {
  display: none;
}

@media (min-width: 701px) {
  
  .early-works-heading {
    margin-left: -3.5%;
  }

  .early-card--earcuff {
    transform: translateX(6%);
  }

  .early-card--spearband {
    transform: translateX(-25%);
  }
}