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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text);
  margin: 0;
  font-weight: 600;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.container { width: var(--container); max-width: calc(100% - 2 * var(--gutter)); margin-inline: auto; }
.container--wide { width: var(--wide); }
.container--narrow { width: var(--narrow); }
.container--x { width: 1300px; }
.container--xl { width: 1350px; }

.section { padding-block: 80px; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--text); color: var(--bg); padding: 12px 20px;
}
.skip-link:focus { left: 0; }

@media (max-width: 980px) {
  :root { --gutter: 20px; }
}