:root {
  --cu-font-family: Replica, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

  /* Set the base font size here. The base component takes care of ensuring that
  every `cu-*` component can have various font settings like size and weight
  modified via custom properties, but this ensures that those overrides are based
  on these initial settings, and that they are slightly larger on desktop vs.
  mobile. */
  /* 18px when browser default is 16px. */
  font-size: 1.13rem;
}


@media (min-width: 1024px) {
  :root {
    /* 20px when browser default is 16px. */
    font-size: 1.25rem;
  }
}

[class*='cu-'] p {
  margin-top: 0;
}

.cu-heading {
  margin: 0 0 var(--cu-component-margin-bottom, var(--cu-vr0));
  --cu-line-height: 1.2;
  --cu-font-weight: 400;
}

.cu-heading strong {
  font-weight: var(--cu-font-weight, inherit);
}

.cu-heading--strong {
  --cu-font-family: 'futura-pt';
  text-transform: uppercase;
  --cu-font-size: var(--cu-ms3);
  --cu-line-height: 1;
}

@media (min-width: 37.5rem) {
  .cu-heading--strong {
    --cu-font-size: var(--cu-ms6);
  }
}

/* This is currently used on the home page to make WORK red. */
.cu-heading--strong span {
  --cu-text-color: #b31b1b;
}

.cu--accented::after {
  content: '';
  display: block;
  width: var(--cu-accent-width, 20%);
  max-width: 100%;
  height: var(--cu-accent-height, 4px);
  margin: var(--cu-accent-margin, .25em 0 0 0);
  background-color: var(--cu-colorscheme-accent, var(--cu-accent-color, var(--cu-color-brand, #b31b1b)));
  transition: width ease-in .25s;
}

.cu--accented:hover::after {
  width: var(--cu-accent-width-hover, calc(var(--cu-accent-width, 20%) * 2));
}