/* =====================================================================
   Shared top-right MENU overlay — used on every page.
   Restyled to the FullscreenScroll-main font baseline ("obviously",
   uppercase) instead of the component's original Inter.
   ===================================================================== */

.menu-open,
.menu-close {
  cursor: pointer;
  font-family: obviously, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  color: #fff;
  font-size: 1rem;
  letter-spacing: 0.05em;
  margin: 0;
}

/* The trigger sits fixed in the top-right corner of every page */
.menu-open {
  position: fixed;
  top: 1.5rem;
  right: 2rem;
  z-index: 600;
}

.menu {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  overflow: hidden;
  pointer-events: none;
  z-index: 900;
  width: 100vw;
  height: 100vh;
  padding: 1.5rem;
  gap: 1.5rem;
  background-color: #101010;
  color: #fff;
  text-transform: uppercase;
  font-family: obviously, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
}

.menu img { width: 100%; height: 100%; object-fit: cover; }

.menu-nav {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding: 1.5rem 2rem;
  z-index: 910;
}

/* ---- Image stack (parallax) ---- */
.menu-img {
  position: relative;
  flex: 3;
  overflow: hidden;
}
.menu-img img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#img-1 { opacity: 0.9; }
#img-2 { opacity: 0.7; }
#img-3 { opacity: 0.5; }
#img-4 { opacity: 0.3; }

/* ---- Links + footer ---- */
.menu-items {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  top: 0;
  padding: 3rem;
}
.menu-logo { width: 3rem; clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
.menu-logo img { position: relative; }

.menu-link,
.menu-sub-item { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }

.menu-link p {
  position: relative;
  font-size: 2.25rem;
  font-weight: 700;
  margin: 0;
}
.menu-link a { color: #fff; text-decoration: none; }
.menu-link a:hover { opacity: 0.6; }

.menu-footer { display: flex; width: 100%; gap: 1.5rem; }
.menu-sub-col { flex: 1; }
.menu-sub-item p {
  position: relative;
  font-size: 0.6875rem;
  font-weight: 300;
  margin: 0;
  color: #fff;
}

@media (max-width: 56.25rem) {
  .menu-img { display: none; }
  .menu-link p { font-size: 1.75rem; }
}