@font-face {
  font-family: 'Manrope';
  src: url('assets/Manrope-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root { color: #fafaf8; background: #191517; font-family: 'Manrope', Arial, sans-serif; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { min-width: 320px; }
p, h1 { margin: 0; }

.landing {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh;
  overflow: hidden;
  background: linear-gradient(to bottom right, #743d4d 0%, #191517 100%);
}

.site-header, .site-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: clamp(1.5rem, 5vw, 4.75rem);
  color: rgb(250 250 248 / 78%);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-header { min-height: 5.5rem; border-bottom: 1px solid rgb(250 250 248 / 14%); }

.language-switcher {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid rgb(250 250 248 / 20%);
  border-radius: 999px;
  background: rgb(250 250 248 / 7%);
}

.language-switcher button {
  min-width: 2.25rem;
  border: 0;
  border-radius: 999px;
  padding: 0.36rem 0.45rem;
  color: rgb(250 250 248 / 65%);
  background: transparent;
  font: inherit;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}

.language-switcher button:hover,
.language-switcher button:focus-visible { color: #fafaf8; }

.language-switcher button:focus-visible { outline: 2px solid #fafaf8; outline-offset: 2px; }

.language-switcher button.is-active { color: #191517; background: #fafaf8; }
.hero { display: grid; align-content: center; justify-items: center; padding: clamp(3.75rem, 11vh, 8rem) 1.5rem; text-align: center; }

.logo {
  display: block;
  width: min(72vw, 34rem);
  height: auto;
  margin-bottom: clamp(3rem, 7vh, 5.25rem);
  filter: brightness(0) invert(1);
}
.message { display: grid; justify-items: center; }

h1 {
  max-width: 15ch;
  color: #fafaf8;
  font-size: clamp(2.15rem, 4.4vw, 4.65rem);
  font-weight: 500;
  letter-spacing: -0.065em;
  line-height: 1.03;
}

h1 span { display: block; }
.soon { margin-top: 0.42em; color: #fafaf8; font-size: clamp(2.8rem, 6.2vw, 6.6rem); font-weight: 650; letter-spacing: -0.055em; line-height: 0.9; word-spacing: 0.08em; }

.introduction {
  max-width: 36rem;
  margin-top: clamp(2rem, 4.5vh, 3.5rem);
  color: rgb(250 250 248 / 76%);
  font-size: clamp(0.9375rem, 1.35vw, 1.125rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.65;
}

.site-footer { justify-content: space-between; min-height: 4.5rem; border-top: 1px solid rgb(250 250 248 / 14%); font-size: 0.625rem; }

@media (max-width: 38rem) {
  .site-header, .site-footer { padding-inline: 1.5rem; }
  .site-header { min-height: 4.75rem; }
  .hero { align-content: center; padding-block: 3.5rem; }
  .logo { width: min(78vw, 25rem); margin-bottom: 3.5rem; }
  h1 { max-width: 12ch; }
  .introduction { max-width: 20rem; }
}