:root {
  color-scheme: dark;
  background: #08080c;
}
/* Vector arrows cannot fall back to an emoji font on iOS. */
.icon-arrow-ne {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex-shrink: 0;
}
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow-x: clip;
  background: #08080c;
}
#home-background, #fallback {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}
#home-background { display: block; }
#home-background[hidden], #fallback[hidden] { display: none; }
#fallback {
  background:
    radial-gradient(ellipse at 50% 50%, #edecff14, transparent 65%),
    repeating-linear-gradient(135deg, transparent 0 18px, #ff800035 19px, transparent 20px 38px),
    #08080c;
}

@font-face {
  font-family: 'Manrope';
  src: url('./assets/manrope-variable.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
#hero { position: relative; height: 100svh; }
.hero-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  pointer-events: none;
}
#wordmark {
  margin: 0;
  color: #edecff;
  font-family: 'Manrope', sans-serif;
  font-size: clamp(24px, 10.8vw, 200px);
  font-weight: 800;
  font-synthesis: none;
  letter-spacing: -0.055em;
  line-height: 1.12;
  white-space: nowrap;
  text-shadow: 0 2px 24px #0f0d2b88;
}
main { position: relative; }

@media (min-width: 761px) {
  #wordmark { font-size: clamp(24px, 9.2vw, 170px); }
}