/* The Portfolio page: a sticky bar of three links under the header, and
   the three category sections below it. */

.pf__top { padding-bottom: 12px; }

.jump {
  position: sticky; top: var(--nav-h); z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-block: 1px solid var(--border);
}
.jump__list {
  display: flex; gap: 10px;
  max-width: var(--max); margin-inline: auto;
  padding: 12px var(--gutter);
  overflow-x: auto;                 /* on a phone the three links scroll sideways */
  scrollbar-width: none;
}
.jump__list::-webkit-scrollbar { display: none; }
.jump__link {
  display: block; white-space: nowrap;
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--border-glow);
  font-weight: 700; font-size: var(--step-0); color: var(--muted);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.jump__link:hover { color: var(--text); border-color: var(--purple); }
.jump__link.is-current {
  color: var(--btn-ink); border-color: transparent;
  background: var(--grad-btn);
}

/* A jump lands with the section label a short gap under both sticky bars:
   small top padding, and a scroll margin just taller than the header plus
   the link bar. */
/* The page already reserves the header height (html scroll-padding-top), so
   this only adds the link bar. */
.pf__sec { padding-top: 32px; scroll-margin-top: 42px; }