* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

img, video { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--red); }

h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.04em; text-wrap: balance; }

button { cursor: pointer; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }

.skip-link {
  position: fixed;
  z-index: 100;
  left: 16px;
  top: 12px;
  padding: 10px 14px;
  background: var(--white);
  color: var(--black);
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.wrap { /* width: min(100% - (var(--pad) * 2), var(--container));  */margin-inline: auto; }
.eyebrow, .label, .number, .project-card__meta, .pending-label {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
}
.eyebrow { color: var(--red); display: none; }
.muted { color: var(--grey-2); }

[data-i18n] { min-height: 1em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}