/* ONE navigation bar: it sits at the landing's foot, then stays at the top.
   Scrolling never changes its contents, dimensions, or appearance. */
:root { --overcloq-nav-height: 65px; }

/* The hero and nav touch even in tall or narrow desktop windows.
   The artwork is width-based, so never reserve more hero height than the
   rendered image can fill. At regular desktop proportions this still fills
   the viewport; at narrower proportions the nav follows the image. */
.landing-screen { min-height: 0; }
@media (min-width: 691px) {
  .landing-screen {
    height: min(calc(100svh - var(--overcloq-nav-height)),
                calc(58.0078125vw - 20px));
  }
}
/* The existing short-window hero artwork is offset by -12px, not -20px. */
@media (min-width: 691px) and (max-height: 700px) {
  .landing-screen {
    height: min(calc(100svh - var(--overcloq-nav-height)),
                calc(58.0078125vw - 12px));
  }
}

.product-index--combined {
  position: sticky;
  top: 0;
  z-index: 30;
  flex: 0 0 auto;
  padding: 0;
  background: #FAF7F0;
  border-top: 1px solid #d6cfc3;
  /* Keep the bottom rule visible even while the bar is sticky. */
  box-shadow: inset 0 -1px 0 #d6cfc3;
}

.product-index--combined .index-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1.2fr)) repeat(2, minmax(0, .85fr));
  border: 0;
}

.product-index--combined .index-link {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  position: relative;
  min-height: 64px;
  min-width: 0;
  padding: 10px 20px !important;
  margin: 0;
  border: 0;
  color: #181918;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}

.product-index--combined .index-link + .index-link {
  border-left: 1px solid #d6cfc3;
}

.product-index--combined .index-name {
  display: block;
  padding: 0;
  font-size: clamp(18px, 1.65vw, 24px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.04em;
  white-space: nowrap;
}

.product-index--combined .index-link--utility .index-name {
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 650;
  letter-spacing: -.02em;
}

.product-index--combined .index-arrow {
  position: static;
  flex: 0 0 auto;
  top: auto;
  right: auto;
  bottom: auto;
  transform: none;
  font-size: 16px;
  line-height: 1;
  color: #4d473e;
}

.product-index--combined .index-link:hover,
.product-index--combined .index-link:focus-visible {
  background: #eee7db;
}
.product-index--combined .index-link:hover .index-arrow {
  transform: translate(2px, -2px);
}

/* Responsive layout is always a single row, in the landing and when pinned.
   Type and spacing shrink progressively, rather than pushing links down. */
@media (max-width: 1000px) {
  :root { --overcloq-nav-height: 57px; }
  .product-index--combined .index-links {
    grid-template-columns: 1.2fr 1.1fr 1.1fr .95fr .8fr;
  }
  .product-index--combined .index-link {
    min-height: 56px;
    padding: 8px clamp(8px, 1.3vw, 16px) !important;
    gap: clamp(4px, .9vw, 10px);
  }
  .product-index--combined .index-name {
    font-size: clamp(13px, 1.8vw, 18px);
  }
  .product-index--combined .index-link--utility .index-name {
    font-size: clamp(12px, 1.5vw, 16px);
  }
  .product-index--combined .index-arrow { font-size: 13px; }
}

@media (max-width: 690px) {
  /* On small screens the hero already sizes itself from its image. */
  .landing-screen { min-height: 0; }
  :root { --overcloq-nav-height: 53px; }
  .product-index--combined .shell { width: 100%; }
  .product-index--combined .index-link {
    min-height: 52px;
    padding: 8px clamp(6px, 1.2vw, 10px) !important;
    gap: 5px;
  }
  .product-index--combined .index-name { font-size: clamp(11px, 2.05vw, 14px); }
  .product-index--combined .index-link--utility .index-name { font-size: clamp(11px, 1.9vw, 13px); }
  .product-index--combined .index-arrow { font-size: 11px; }
}

@media (max-width: 540px) {
  :root { --overcloq-nav-height: 49px; }
  .product-index--combined .index-links {
    grid-template-columns: 1.16fr 1.07fr 1.06fr 1.02fr .79fr;
  }
  .product-index--combined .index-link {
    justify-content: center;
    min-height: 48px;
    padding: 8px clamp(3px, 1vw, 6px) !important;
  }
  .product-index--combined .index-name,
  .product-index--combined .index-link--utility .index-name {
    font-size: clamp(10px, 2.5vw, 13px);
    letter-spacing: -.04em;
  }
  /* Free width for the full labels without wrapping. Same both before and after stick. */
  .product-index--combined .index-arrow { display: none; }
}

/* Keep hash-link destinations visible below the sticky navigation. */
html { scroll-padding-top: calc(var(--overcloq-nav-height) + 12px); }