:root {

  /* colors */
  --black: var(--black, #4A4A4A);
  --dark: var(--dark, rgb(61, 71, 55));
  --light: var(--light, color(var(--dark) l(50%)));
  --accent: var(--accent, #74E19A));

  /* spacing and sizing */
  --nav-height: var(--nav-height, 80px);
  --column: var(--column, 64px);
  --gutter: var(--gutter, 32px);
  --section-article-small: var(--section-article-small, calc(var(--column) * 3 + var(--gutter) * 2));
  --section-article-large: var(--section-article-large, calc(var(--column) * 5 + var(--gutter) * 4));

  /* font styling */
  --font-family: var(--font-family, sans-serif);

  --topic-title-color: var(--topic-title-color, var(--black));
  --topic-title-family: var(--topic-title-family, var(--font-family));
  --topic-title-size: var(--topic-title-size, 48px);
  --topic-title-weight: var(--topic-title-weight, 300);

  --section-title-color: var(--section-title-color, var(--dark));
  --section-title-family: var(--section-title-family, var(--font-family));
  --section-title-size: var(--section-title-size, 24px);
  --section-title-weight: var(--section-title-weight, 600);
  --section-article-color: var(--section-article-color, var(--dark));
  --section-article-family: var(--section-article-family, var(--font-family));
  --section-article-size: var(--section-article-size, 16px);
  --section-article-weight: var(--section-article-weight, 400);

  /* z-index layers */
  --background: var(--background, -10);
  --foreground: var(--foreground, 10);
  --cover: var(--cover, 20);

  /* subnav */
  --subnav-size: var(--subnav-size, var(--nav-height));

}

.anchor {
  margin-top: calc(var(--nav-height) * -1);
  outline: 0;
  padding-top: var(--nav-height);
  position: relative;
}