:root {
  --bg: #ffffff;
  --ink: #000000;
  --board-w: 2880;
  --board-h: 1800;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
}

body.loader {
  overflow: hidden;
}

.loader-layer {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
}

.viewport {
  width: 100vw;
  height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: transparent;
}

.loader-scale {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
}

.loader-graphic {
  position: absolute;
  inset: 0;
}

.loader-title,
.loader-art {
  z-index: 2;
  font-family: "Outfit", sans-serif;
  font-weight: 500;
  font-kerning: none;
  font-feature-settings: "kern" 0;
}

.loader-title {
  left: 50%;
  transform: translateX(-50%);
}

.loader-art {
  left: calc((100% - (491.385 / 2880 * 100%)) / 2 - (1.1958 / 2880 * 100%));
  top: calc((909.965 / 1800 * 100%) + (66.738 / 1800 * 50%) - 0.515em);
}

.artboard {
  position: relative;
  width: min(100vw, calc(100dvh * 2880 / 1800));
  aspect-ratio: 2880 / 1800;
}

.strip {
  position: absolute;
  display: block;
  width: calc(491.385 / 2880 * 100%);
  height: calc(66.738 / 1800 * 100%);
  object-fit: fill;
}

.strip-04,
.strip-05,
.strip-06,
.strip-08,
.strip-09 {
  left: calc((100% - (491.385 / 2880 * 100%)) / 2);
}

.strip-04 {
  top: calc(672.131 / 1800 * 100%);
  height: calc(66.739 / 1800 * 100%);
}

.strip-05 {
  top: calc(751.41 / 1800 * 100%);
}

.strip-06 {
  top: calc(830.687 / 1800 * 100%);
}

.strip-07 {
  left: calc((100% - (491.385 / 2880 * 100%)) / 2 + (143.68 / 2880 * 100%));
  top: calc(909.965 / 1800 * 100%);
  width: calc(491.384 / 2880 * 100%);
}

.strip-08 {
  top: calc(989.243 / 1800 * 100%);
}

.strip-09 {
  top: calc(1068.521 / 1800 * 100%);
}

.wordmark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.wordmark text {
  font-family: "Outfit", sans-serif;
  font-weight: 500;
  fill: var(--ink);
  font-kerning: none;
  font-feature-settings: "kern" 0;
}

.home {
  min-height: 100dvh;
  background: var(--bg);
}

.noscript-enter {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  font-family: "Outfit", sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  color: var(--ink);
}