*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

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

h1,
p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

svg {
  display: block;
}

button {
  font: inherit;
}

/* `hidden` always wins over a component's display rule */
[hidden] {
  display: none !important;
}

/* Available to screen readers, not drawn */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The custom cursor (js/systems/cursor.js) replaces the native one on fine pointers. */
.has-custom-cursor,
.has-custom-cursor * {
  cursor: none;
}