@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: fallback;
  src: url("../fonts/manrope.woff2") format("woff2");
}

:root {
  --color-text: #111111;
  --color-bg: #ffffff;
  --font-body: Manrope, sans-serif;
  --text-base: clamp(1.125rem, 1.125rem + ((1vw - 0.2rem) * 0.392), 1.375rem);
  --text-display: clamp(2.15rem, 2.15rem + ((1vw - 0.2rem) * 1.333), 3rem);
  --measure: 645px;
  --space-flow: 1.2rem;
  --space-inline: clamp(30px, 5vw, 50px);
  --space-block: clamp(30px, 7vw, 70px);
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 300;
  letter-spacing: -0.1px;
  line-height: 1.4;
}

a {
  color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.1em;
}

a:hover {
  text-decoration: none;
}

:focus {
  outline-style: solid;
  outline-width: 2px;
}

h1,
p {
  text-wrap: pretty;
}

.skip-link {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 12px 20px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 600;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.page {
  padding: calc(var(--space-block) * 2) var(--space-inline) calc(var(--space-block) + var(--space-flow));
}

.flow {
  max-width: var(--measure);
  margin: 0 auto;
}

.flow > * {
  margin-block: 0;
}

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

.title,
.tagline {
  font-size: var(--text-display);
}

.title {
  font-weight: 400;
  line-height: 1.4;
}

.title,
.tagline,
.center {
  text-align: center;
}

li {
  margin-top: 0.5rem;
}

.figure {
  margin-inline: 0;
}

.figure img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.figure--logo {
  text-align: center;
}

.figure--logo img {
  width: 182px;
}

.video iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}