/* Shared chapter navigation for portfolio case studies. */
:root {
  /* Space between a case-study heading and its introductory copy when stacked. */
  --case-intro-copy-gap: clamp(28px, 4vw, 48px);
}

.case-chapters {
  background: #1d2429;
  color: #fff;
  padding: 0;
}

.case-chapters__inner {
  box-sizing: border-box;
  width: min(100%, 1440px);
  margin-inline: auto;
  padding: 11px clamp(20px, 3.4vw, 48px);
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.case-chapters__inner::-webkit-scrollbar {
  display: none;
}

.case-chapters a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-height: 44px;
  border-bottom: 2px solid transparent;
  color: inherit;
  font: 600 13px/1.4 'Montserrat', sans-serif;
  white-space: nowrap;
  text-decoration: none;
}

.case-chapters a:hover,
.case-chapters a:focus-visible {
  border-bottom-color: #aab2ff;
  text-decoration: none;
}

.case-chapters__number {
  flex: none;
  color: #aab2ff;
  font-variant-numeric: tabular-nums;
}

.case-chapters ~ section[id] {
  scroll-margin-top: 4rem;
}

@media (max-width: 700px) {
  .case-chapters__inner {
    gap: 24px;
    padding-block: 8px;
  }

  .case-chapters a {
    font-size: 12px;
  }
}