/* Desktop rhythm pass: keep navigation compact and leave the work itself room to breathe. */
.hover-nav {
  flex-wrap: nowrap !important;
  gap: clamp(6px, .65vw, 12px) !important;
  max-width: calc(100vw - clamp(220px, 19vw, 330px)) !important;
  overflow-x: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.hover-nav::-webkit-scrollbar { display: none; }

.primary-nav button {
  flex: 0 0 auto;
  justify-content: center;
  min-width: 0 !important;
  padding: clamp(7px, .65vw, 11px) clamp(12px, 1.05vw, 20px) !important;
  width: clamp(84px, 8.3vw, 160px);
}

.primary-nav button span {
  font-size: clamp(11px, .85vw, 16px) !important;
  letter-spacing: .045em !important;
}

.next-button,
.home-button {
  bottom: clamp(42px, 4.5vh, 64px) !important;
  padding-top: 17px !important;
  width: min(280px, 24vw) !important;
}

.next-button { right: clamp(14px, 1.6vw, 32px) !important; }
.home-button { left: clamp(14px, 1.6vw, 32px) !important; }

.next-button:before,
.home-button:before { height: 10px !important; }

.next-button small,
.home-button small { font-size: clamp(10px, .82vw, 15px) !important; }

.next-button span,
.home-button span { font-size: clamp(15px, 1.28vw, 22px) !important; }

.next-button b,
.home-button b {
  font-size: clamp(22px, 1.9vw, 34px) !important;
  margin-left: 10px !important;
}

.gallery-screen,
.project-detail-screen { padding-bottom: clamp(152px, 17vh, 210px) !important; }

.gallery-screen .gallery { flex-basis: clamp(250px, 42vh, 500px) !important; }

.project-pager { bottom: clamp(108px, 11vh, 142px) !important; }

.modal-art { position: relative; }

.modal-nav {
  align-items: center;
  background: linear-gradient(145deg, #151a36cc, #04060ecc);
  border: 1px solid #77ceff70;
  border-radius: 50%;
  color: #e9fbff;
  cursor: pointer;
  display: grid;
  font-family: var(--display);
  font-size: clamp(34px, 3vw, 54px);
  height: clamp(48px, 5vw, 76px);
  justify-content: center;
  line-height: 1;
  opacity: .72;
  padding: 0 0 5px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(.9);
  transition: opacity .35s ease, transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  width: clamp(48px, 5vw, 76px);
  z-index: 3;
}

.modal-art:hover .modal-nav,
.modal-nav:focus-visible { opacity: 1; transform: translateY(-50%) scale(1); }

.modal-nav:hover,
.modal-nav:focus-visible {
  border-color: #9ae9ff;
  box-shadow: 0 0 16px #66d7ff90, 0 0 28px #865dff70;
  outline: 0;
}

.modal-prev { left: clamp(16px, 2.2vw, 38px); }
.modal-next { right: clamp(16px, 2.2vw, 38px); }

@media (min-width: 561px) {
  .home-title-art { transform: translateY(-4%) !important; }
}

@media (max-width: 920px) {
  .hover-nav { max-width: calc(100vw - 170px) !important; }
  .next-button,
  .home-button { bottom: 42px !important; width: min(210px, 30vw) !important; }
  .gallery-screen,
  .project-detail-screen { padding-bottom: 135px !important; }
  .gallery-screen .gallery { flex-basis: clamp(220px, 40vh, 380px) !important; }
  .project-pager { bottom: 94px !important; }
}

@media (max-width: 560px) {
  .hover-nav { max-width: calc(100vw - 112px) !important; }
  .next-button,
  .home-button { bottom: 36px !important; width: 40vw !important; }
  .gallery-screen,
  .project-detail-screen { padding-bottom: 118px !important; }
  .project-pager { bottom: 84px !important; }
}