html {
  background-color: var(--color-bg);
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
}

.h1, h1 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-display);
}

.h2, h2 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
}

.h3, h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
}

.h4, h4 {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
}

h1, h2, h3, h4, h5, h6,
button, .button, label, legend, th,
.nav__summary, .nav__link, .nav__sublink,
.footer__heading, .footer__link,
.eyebrow, .form__label,

.marquee__name,
.case__lead-in, .case__client, .quote__name, .quote__role,

.case-feature__client, .case-feature__stamp-value, .case-feature__figure,
.case-feature__figure-label, .case-feature__system-label,
.case-study__client, .case-study__category, .case-study__key-figure,

.testimonial__name, .testimonial__role,

.text-link,

.proper-noun {
  hyphens: none;
}

.case-study__title {
  hyphens: manual;
}

.prose p,
.prose li,
.prose dd,
.prose blockquote {
  hyphens: auto;
  -webkit-hyphens: auto;
}

.prose > * + * {
  margin-block-start: var(--space-4);
}

.prose > * + :is(h2, h3) {
  margin-block-start: var(--space-7);
}

.lead {
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.eyebrow {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-caption);
  text-transform: uppercase;
  color: var(--color-accent);
}

a:not([class]) {
  color: var(--color-accent);
  text-underline-offset: 0.2em;
}

a:not([class]):hover {
  text-decoration-thickness: 2px;
}

.text-link {
  color: var(--color-accent);
  text-underline-offset: 0.2em;

hyphens: manual;
  -webkit-hyphens: manual;
}

.text-link:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}

::selection {
  background-color: var(--color-accent);
  color: var(--color-deep);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}