.brand-mark {
  width: 32px;
  height: 32px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.footer-brand-mark {
  grid-row: 1 / 3;
  width: 27px;
  height: 27px;
}

.hero-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
}

.hero-visual::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(242, 240, 233, .98) 0%, rgba(242, 240, 233, .92) 34%, rgba(242, 240, 233, .22) 68%, rgba(242, 240, 233, .04) 100%);
}

.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero > :not(.hero-visual) {
  position: relative;
  z-index: 1;
}

.read-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
  align-items: end;
  gap: clamp(3rem, 8vw, 9rem);
  padding-right: 0;
  padding-bottom: 0;
}

.read-hero > div {
  padding-bottom: 10vh;
}

.read-hero h1 {
  font-size: clamp(58px, 7vw, 102px);
}

.read-hero figure {
  align-self: stretch;
  min-height: 500px;
  margin: 0;
  overflow: hidden;
}

.read-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-notes {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  height: min(62vw, 760px);
  background: var(--ink);
}

.image-notes figure {
  min-width: 0;
  margin: 0;
  overflow: hidden;
}

.image-notes figure:nth-child(2) {
  margin: 7vw 0;
}

.image-notes img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72) contrast(.94);
  transition: filter .4s ease, transform .8s ease;
}

.image-notes figure:hover img {
  filter: saturate(1) contrast(1);
  transform: scale(1.015);
}

.about-page {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr);
  max-width: 1180px;
  gap: clamp(3rem, 8vw, 8rem);
}

.about-page header {
  grid-column: 1 / -1;
  max-width: 940px;
  margin-right: auto;
  margin-left: auto;
}

.about-portrait {
  align-self: start;
  margin: 0;
  overflow: hidden;
}

.about-portrait img {
  display: block;
  width: 100%;
  height: auto;
}

.about-page .prose {
  align-self: center;
  margin: 0;
}

@media (max-width: 760px) {
  .hero-visual::after {
    background: linear-gradient(180deg, rgba(242, 240, 233, .96) 0%, rgba(242, 240, 233, .82) 45%, rgba(242, 240, 233, .15) 100%);
  }

  .hero-visual img {
    object-position: 52% center;
  }

  .read-hero {
    display: block;
    padding-right: 0;
    padding-left: 0;
  }

  .read-hero > div {
    padding-right: 24px;
    padding-left: 24px;
  }

  .read-hero figure {
    min-height: 320px;
  }

  .image-notes {
    grid-template-columns: 1fr 1fr;
    height: 680px;
  }

  .image-notes figure:nth-child(2) {
    margin: 0;
  }

  .image-notes figure:last-child {
    display: none;
  }

  .about-page {
    display: block;
  }

  .about-portrait {
    margin-bottom: 4rem;
  }

}