:root {
  --type-main: 3.2rem;
  --type-title: 1.45rem;
  --type-copy: 1.18rem;
  --type-weight: 400;
  --type-tracking: .045em;
  --type-leading: 1.2;
}

body {
  margin: 0;
  background: #fdfdfd;
  color: rgba(0, 0, 0, .88);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--type-copy);
  font-weight: var(--type-weight);
  line-height: var(--type-leading);
  letter-spacing: var(--type-tracking);
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: #586b43;
}

.mark {
  position: absolute;
  top: 3rem;
  left: 5%;
  z-index: 10;
  display: block;
  width: 34px;
}

.mark img {
  display: block;
  width: 100%;
  height: auto;
}

.home-intro,
.thumbs,
.page-title,
.project,
.about,
.contact {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.home-intro {
  padding-top: 5rem;
  padding-bottom: 7rem;
}

.home-intro h1 {
  margin: 0 0 2.2rem;
  font-size: var(--type-main);
  font-weight: var(--type-weight);
  line-height: var(--type-leading);
  letter-spacing: var(--type-tracking);
}

.home-intro nav {
  font-size: var(--type-copy);
  line-height: var(--type-leading);
}

.thumb {
  display: block;
  margin: 0 0 4rem;
}

.thumb img,
.project img {
  display: block;
  width: 100%;
  height: auto;
}

.thumb img {
  transition: opacity 180ms ease, filter 180ms ease;
}

.thumb:hover img {
  opacity: .72;
  filter: saturate(.7) contrast(1.08);
}

.thumb:hover span {
  color: #586b43;
}

.thumb span {
  display: block;
  padding-top: .7rem;
  color: rgba(0, 0, 0, .88);
  font-size: var(--type-title);
  font-weight: var(--type-weight);
  line-height: var(--type-leading);
  letter-spacing: var(--type-tracking);
}

.page-title {
  padding-top: 3rem;
  padding-bottom: 2.2rem;
}

.page-title h1 {
  margin: 0;
  padding-left: 3.8rem;
  font-size: var(--type-title);
  font-weight: var(--type-weight);
  line-height: var(--type-leading);
  letter-spacing: var(--type-tracking);
}

.project {
  padding-bottom: 4rem;
}

.project-copy {
  margin: 0 0 3.4rem;
  max-width: none;
  font-size: var(--type-copy);
}

.project-copy p {
  margin: 0 0 1.2rem;
}

.project figure {
  margin: 0 0 5.6rem;
}

.project figcaption {
  margin-top: 1.2rem;
  width: 100%;
  max-width: none;
  font-size: var(--type-copy);
}

.project figcaption p {
  margin: 0;
}

.project figcaption span {
  font-size: var(--type-title);
  font-weight: var(--type-weight);
  letter-spacing: var(--type-tracking);
}

.about,
.contact {
  padding: 3rem 0 5rem;
}

.about h1,
.contact h1 {
  margin: 0 0 2rem;
  padding-left: 3.8rem;
  font-size: var(--type-title);
  font-weight: var(--type-weight);
  letter-spacing: var(--type-tracking);
}

.about p,
.contact p {
  max-width: 42rem;
  margin: 0 0 1.2rem;
  padding-left: 3.8rem;
  font-size: var(--type-copy);
}

@media (max-width: 760px) {
  :root {
    --type-main: 2.7rem;
    --type-title: 1.25rem;
    --type-copy: 1.05rem;
  }

  .home-intro,
  .page-title,
  .thumbs,
  .project,
  .about,
  .contact {
    width: 88vw;
  }

  .home-intro {
    padding-top: 4rem;
    padding-bottom: 5rem;
  }

  .thumb {
    margin-bottom: 2.8rem;
  }

  .mark {
    position: absolute;
    width: 30px;
    top: 3rem;
    left: 6vw;
  }

  .page-title h1,
  .about h1,
  .about p,
  .contact h1,
  .contact p {
    padding-left: 3.3rem;
  }
}