html {
  font-size: 16px;
}

body {
  background-color: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-sans);
  font-weight: 300;
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.menu-open {
  overflow: hidden;
}

/* Scroll fade-in */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Page header */
.page-header {
  padding-top: calc(var(--sp-128) + 60px);
  padding-bottom: var(--sp-64);
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--sp-64);
}

.page-title {
  font-family: var(--f-serif);
  font-size: var(--fs-h1);
  font-weight: 300;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}