/* spacing, z-index */

:root {
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  --hero-vh: 100vh; /* fallback */
}

.frame {
  z-index: 2;
  pointer-events: none;
}
.frame > * {
  pointer-events: auto; /* chaque nav est interactive */
}

main {
  z-index: 1;
}

:root {
  --frame-top-height: 10vw;    /* hauteur du Y */
  --frame-bottom-height: calc(48px + var(--space-4));  /* hauteur All projects */
  --frame-padding-y: 48px;
}
@media (max-width: 768px) {
  :root {
    --frame-top-height: 77px;
    --frame-bottom-height: 36px;
  }
}

/* navigateurs modernes */
@supports (height: 100svh) {
  :root {
    --hero-vh: 100svh;
  }
}