/* Foundation: inherited font, text roles, box sizing and accessibility.
 * Component usage and ownership: docs/technology-stack.md#design-system
 */

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-white);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea {
  font-family: inherit;
}

.public-project, .public-project *, .page-brand, .page-brand *, .project-footer, .project-footer * {
  box-sizing: border-box;
}

.public-project h1 {
  margin: 0 0 var(--space-6);
  color: var(--color-navy);
  font-size: var(--font-size-40);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
}

.public-project h2 {
  max-width: 680px;
  margin: 0 0 var(--space-15);
  color: var(--color-navy);
  font-size: var(--font-size-28);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

.section-label {
  display: block;
  margin-bottom: var(--space-8);
  color: var(--color-blue);
  font-size: var(--font-size-11);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-section);
  text-transform: uppercase;
}

.project-prose {
  margin: 0;
  color: var(--color-body-copy);
  font-size: var(--font-size-15);
  line-height: var(--leading-prose);
  white-space: pre-line;
}

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

@media (max-width: 720px) {
  .public-project h1 {
    font-size: var(--font-size-32);
  }

  .public-project h2 {
    font-size: var(--font-size-24);
  }

}