:root {
  --mark: oklch(0.73 0.2 52);
  --ink: oklch(0.94 0.03 70);
  --ink-dim: oklch(0.82 0.04 62);
  --scrim: oklch(0.12 0.03 50 / 0.62);
  --font-display: "Syne", "Avenir Next", system-ui, sans-serif;
  --font-ui: "Outfit", "Gill Sans", system-ui, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

html {
  background: oklch(0.11 0.03 42);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100dvh;
  font-family: var(--font-ui);
}

.stage {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  overflow-x: clip;
}

.page-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.page-backdrop__layer {
  position: absolute;
  inset: 0;
}

.page-backdrop__layer.hero-shader canvas,
.hero-shader canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.page-backdrop__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-backdrop__empty {
  position: absolute;
  inset: 0;
  background: oklch(0.11 0.03 42);
}

.hero-shader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.stage__content {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
  pointer-events: none;
}

.logo {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100vw;
  margin: 0;
  place-self: start;
  filter: drop-shadow(0 0.35rem 1.4rem oklch(0.1 0.03 50 / 0.55));
}

.logo img {
  display: block;
  width: 100%;
  height: auto;
}

.links {
  pointer-events: auto;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.15rem 1.35rem;
  padding: 1.4rem 1.5rem 2.1rem;
  background: linear-gradient(to top, var(--scrim), transparent);
}

.links__item {
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.45rem 0.1rem;
  border-bottom: 1px solid transparent;
}

.links__item:hover,
.links__item:focus-visible {
  color: var(--mark);
  border-bottom-color: oklch(0.73 0.2 52 / 0.85);
  outline: none;
}

@media (max-width: 640px) {
  .links {
    gap: 0.1rem 0.95rem;
    padding-bottom: 1.6rem;
  }

  .links__item {
    letter-spacing: 0.1em;
    font-size: 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-backdrop {
    filter: saturate(0.92);
  }
}