body {
  font-family: var(--font-family);
  line-height: var(--line-height-4);
}

h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); }
h5 { font-size: var(--h5); }
h6 { font-size: var(--h6); }
p, 
a {
  font-size: var(--body-text);
}

.heading {
  font-family: var(--font-black);
  line-height: 25px;
}

.underline-offwhite {
  transition: color 200ms ease;
  text-decoration: none;
  position: relative;
  text-shadow: -1px -1px 0 var(--color-offwhite), 1px -1px 0 var(--color-offwhite), -1px 1px 0 var(--color-offwhite), 1px 1px 0 var(--color-offwhite);
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, var(--color-black) 2px, var(--color-black) 3px, rgba(0, 0, 0, 0) 3px);
}

.underline-offwhite:hover {
  transition: color 200ms ease;
  text-decoration: none;
  position: relative;
  text-shadow: -1px -1px 0 var(--color-offwhite), 1px -1px 0 var(--color-offwhite), -1px 1px 0 var(--color-offwhite), 1px 1px 0 var(--color-offwhite);
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, var(--color-orange) 2px, var(--color-orange) 3px, rgba(0, 0, 0, 0) 3px);
}

.underline-red {
  transition: color 200ms ease;
  text-decoration: none;
  position: relative;
  text-shadow: -1px -1px 0 var(--color-offwhite), 1px -1px 0 var(--color-offwhite), -1px 1px 0 var(--color-offwhite), 1px 1px 0 var(--color-offwhite);
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, var(--color-red) 2px, var(--color-red) 3px, rgba(0, 0, 0, 0) 3px);
}

.sub {
  composes: heading;
  text-transform: uppercase;
  font-size: 1.277777778em;
  font-weight: bold;
}

.title {
  font-family: var(--font-black);
  text-transform: uppercase;
  font-size: 1em;
  font-weight: 700;
}

.link {
  font-family: var(--button-font-family);
  font-size: 14px;
  font-weight: var(--button-font-weight);
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  line-height: var(--button-line-height);
  /* padding: 0 0 .25em 0; */
  height: auto;
  vertical-align: middle;
  -webkit-appearance: none;
  color: inherit;
  text-decoration: none;
  color: var(--color-primary);
  transition: border 0.5s ease;
  border-bottom: 1px solid transparent;
}

.link:hover {
  border-bottom: 1px solid var(--color-black);
}

.link:visited { color: color(var(--color-primary) l(-10%)); }
/* .link:hover { color: color(var(--color-primary) a(70%)); } */
.link:active { color: color(var(--color-primary) a(50%)); }

.black.is-active {
  border-bottom: 2px solid var(--color-black);
}

:root {
  --font-book: 'AvenirLT-Book', Helvetica Neue, Helvetica, Arial, sans-serif;
  --font-heavy: 'AvenirLTStd-Heavy', Helvetica Neue, Helvetica, Arial, sans-serif;
  --font-black: 'AvenirLTStd-Black', Helvetica Neue, Helvetica, Arial, sans-serif;

  --h1: 1.875rem;
  --h2: 1.5rem;
  --h3: 1.44rem;
  --h4: 1rem;
  --h5: .875rem;
  --h6: .75rem;
  --body-text: .875rem;

  --font-family: var(--font-book);
  --monospace-font-family: 'Roboto Mono', Consolas, monospace;
  --line-height-1: 1;
  --line-height-2: 1.125;
  --line-height-3: 1.25;
  --line-height-4: 1.5;
  --letter-spacing: 1;
  --caps-letter-spacing: .2em;
  --bold-font-weight: bold;
  --heading-font-family: var(--font-family);
  --heading-font-weight: bold;
  --heading-line-height: 1.25;
}