:root {
  color-scheme: dark;
  --background: #111310;
  --logo-width: 44vw;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--background);
}

.page {
  display: grid;
  place-items: center;
  background: var(--background);
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.wordmark {
  position: relative;
  width: clamp(210px, var(--logo-width), 82vw);
  aspect-ratio: 1352 / 104;
  overflow: hidden;
  mix-blend-mode: difference;
}

/*
 * Keep the supplied 1920 x 819 artwork intact. This viewport shows its
 * wordmark at x=284, y=345, width=1352, height=104, without the outer padding.
 * White letters on black use difference blending to match the mockup.
 */
.wordmark img {
  position: absolute;
  display: block;
  width: 142.01183432%;
  max-width: none;
  height: auto;
  left: -21.00591716%;
  top: -331.73076923%;
  filter: grayscale(1) contrast(5) invert(1);
  pointer-events: none;
  user-select: none;
}