.hero {
  min-height: min(900px, 100svh);
  height: min(900px, 100svh);
  padding-top: 132px;
}

.hero h1 {
  font-size: clamp(64px, 8.7vw, 128px);
  letter-spacing: -.035em;
}

.hero h1 em,
.intro h2 em,
.portrait h2 em,
.philosophy h2 em,
.gatherings h2 em,
.documents h2 em,
.contact h2 em {
  color: var(--green);
  letter-spacing: -.02em;
}

.hero-image {
  display: grid;
  place-items: center;
  background: #e4e0d7;
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: none;
}

.hero-image::after {
  inset: auto 0 0;
  height: 18%;
  background: linear-gradient(transparent, rgba(24,24,20,.3));
}

.collage-section {
  padding: 30px 10vw 145px;
}

.collage-heading {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 5vw;
  align-items: start;
  margin-bottom: 55px;
}

.collage-heading .section-marker { padding-top: 8px; }
.collage-heading .eyebrow { margin: 0 0 20px; }

.collage-heading h2 {
  margin: 0;
  font: 400 clamp(48px, 6.3vw, 84px)/.92 var(--serif);
  letter-spacing: -.025em;
  text-wrap: balance;
}

.collage-heading h2 em { color: var(--green); }

.object-collage {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .8fr 1fr 1fr;
  grid-template-rows: 230px 110px 240px;
  gap: 14px;
  padding-top: 25px;
}

.collage-item {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #d8d2c7;
}

.collage-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72);
  transition: transform .8s var(--ease);
}

.collage-item:hover img { transform: scale(1.035); }

.collage-item::after {
  position: absolute;
  inset: 60% 0 0;
  background: linear-gradient(transparent, rgba(20,20,18,.38));
  content: "";
  pointer-events: none;
}

.collage-item figcaption {
  position: absolute;
  z-index: 1;
  bottom: 12px;
  left: 13px;
  color: #fff;
  font: 7px var(--mono);
  letter-spacing: .12em;
}

.collage-a { grid-column: 1; grid-row: 1 / span 2; }
.collage-b { grid-column: 2; grid-row: 1; }
.collage-c { grid-column: 3; grid-row: 1 / span 2; }
.collage-d { grid-column: 4; grid-row: 1; }
.collage-e { grid-column: 1; grid-row: 3; }
.collage-f { grid-column: 2; grid-row: 2 / span 2; }
.collage-g { grid-column: 3; grid-row: 3; }
.collage-h { grid-column: 4; grid-row: 2 / span 2; }

.collage-note {
  position: absolute;
  top: -1px;
  right: 0;
  color: #737970;
  text-align: right;
  font: 7px/1.6 var(--mono);
  letter-spacing: .13em;
}

.object-pair {
  overflow: visible;
  background: transparent;
  isolation: isolate;
}

.pair-photo {
  position: absolute;
  margin: 0;
  padding: 12px;
  background: #ece9e1;
  border: 1px solid #d2d0c7;
}

.pair-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
}

.pair-photo-watch {
  z-index: 1;
  inset: 2% 21% 3% 2%;
  transform: rotate(-3deg);
}

.pair-photo-detail {
  z-index: 2;
  inset: 19% 0 16% 49%;
  transform: rotate(3deg);
}

.object-pair .art-caption {
  z-index: 3;
  bottom: -30px;
  left: 3px;
  color: #737970;
  text-shadow: none;
}

@media (max-width: 900px) {
  .hero { min-height: 690px; height: auto; }
  .hero h1 { font-size: clamp(60px, 9vw, 96px); }
  .collage-section { padding-left: 7vw; padding-right: 7vw; }
  .object-collage { grid-template-rows: 190px 90px 195px; gap: 10px; }
}

@media (max-width: 600px) {
  .hero { min-height: 0; height: auto; padding-top: 102px; }
  .hero-image { height: auto; aspect-ratio: 1721 / 914; min-height: 0; }
  .collage-section { padding-top: 18px; padding-bottom: 90px; }
  .collage-heading { grid-template-columns: 1fr; gap: 34px; margin-bottom: 36px; }
  .object-collage { grid-template-columns: 1fr 1fr; grid-template-rows: 210px 120px 190px 125px; gap: 9px; padding-top: 24px; }
  .collage-a { grid-column: 1; grid-row: 1 / span 2; }
  .collage-b { grid-column: 2; grid-row: 1; }
  .collage-c { grid-column: 2; grid-row: 2 / span 2; }
  .collage-d { grid-column: 1; grid-row: 3; }
  .collage-e { grid-column: 1; grid-row: 4; }
  .collage-f { grid-column: 2; grid-row: 4; }
  .collage-g, .collage-h { display: none; }

  .object-pair {
    width: 100%;
    height: 112vw;
    min-height: 0;
    max-height: 500px;
    overflow: visible;
  }

  .pair-photo { padding: 8px; }
  .pair-photo-watch { inset: 1% 24% 3% 1%; }
  .pair-photo-detail { inset: 22% 0 14% 49%; }
  .object-pair .art-caption { bottom: -24px; font-size: 7px; }
}