body {
  margin: 0;
  background: var(--functional-background);
  color: var(--functional-body);
  font-family: var(--font-display);
}

main {
  max-width: 1512px;
  margin: 0 auto;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px;
  padding: 88px 104px 56px;
  align-items: center;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 692px;
}

.hero__tagline {
  margin: 0;
  font-size: var(--type-body-l-size);
  font-weight: var(--type-body-l-weight);
  line-height: var(--type-body-l-line-height);
  color: var(--functional-neutral-dark);
}

.hero__tag-pd { color: var(--accents-wine-red); }
.hero__tag-vt { color: var(--accents-olive); }
.hero__tag-divider { white-space: pre; }

.hero__headline {
  margin: 0;
}

.hero__emphasis {
  font-style: italic;
  font-weight: 700;
  color: var(--accents-wine-red);
}

.hero__lede {
  margin: 0;
  color: var(--functional-neutral-dark);
}

.hero__cta {
  align-self: flex-start;
}

.hero__portrait {
  width: 519px;
  flex-shrink: 0;
}

.hero__portrait img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgb(0 0 0 / 1) 0%,
    rgb(0 0 0 / 0.9) 68.27%,
    rgb(0 0 0 / 0.354) 87.5%,
    rgb(0 0 0 / 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgb(0 0 0 / 1) 0%,
    rgb(0 0 0 / 0.9) 75%,
    rgb(0 0 0 / 0.354) 90%,
    rgb(0 0 0 / 0) 100%
  );
}

.projects-grid {
  display: flex;
  gap: 56px;
  padding: 64px 104px;
  align-items: flex-start;
}

.projects-grid__col {
  display: flex;
  flex-direction: column;
  gap: 64px;
  flex: 1 0 0;
  min-width: 0;
}

.site-footer {
  text-align: center;
  padding: 32px 104px 24px;
  color: var(--functional-neutral-dark);
}

.site-footer p {
  margin: 0;
}