@font-face {
  font-family: 'Geometos';
  src: url('fonts/Geometos.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --page-background: #fffbea;
  --logo-width: min(68vw, 1120px);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-width: 100%;
  min-height: 100%;
  background: var(--page-background);
}

body {
  overflow-x: hidden;
}

.stage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 12vh;
  padding-bottom: 0;
}

.logo-wrap,
.tagline-row {
  width: var(--logo-width);
}

.logo {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.97;
  mix-blend-mode: multiply;
}

.tagline-row {
  margin-top: 4.25vh;
}

/* Desktop: slightly smaller text while keeping the right edge aligned. */
.tagline-frame {
  width: 47%;
  margin-left: 52%;
  overflow: visible;
}

.tagline {
  margin: 0;
  color: #8a8a8a;
  font-family: 'Geometos', sans-serif;
  font-weight: 400;
  line-height: 1;
  opacity: 0.7;
  white-space: nowrap;
}

.tagline-text {
  display: inline-block;
  letter-spacing: 0.04em;
}

.half-space {
  display: inline-block;
  width: 0.28em;
}

@media (max-width: 767px) {
  :root {
    --logo-width: 68vw;
  }

  .stage {
    padding-top: 14vw;
    padding-bottom: 0;
  }

  .tagline-row {
    margin-top: 3.25vh;
  }

  /* Mobile keeps the original text alignment. */
  .tagline-frame {
    width: 86%;
    margin-left: 9vw;
  }
}