/* The inchworm menu: a bar of links with a white pill under the current one. Moving to another link, the pill reaches
   it with its front edge first and pulls the back edge after it, stretching and thinning on the way like an inchworm;
   the words over the pill are black, those outside light. */
:root {
  --page: #000000;          /* the page */
  --bar: #101010;           /* the bar */
  --line: rgba(255, 255, 255, 0.13);
  --text: rgba(255, 255, 255, 0.62);   /* the words outside the pill */
  --pill: #ffffff;          /* the pill */
  --on: #000000;            /* the words over the pill */
  --glow: 0.22;             /* set by the script: the light under the pill */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: #fff;
  font-family: 'Instrument Sans Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 40px 16px;
}

/* ---------------------------------------------------------------- the bar */
.bar {
  position: relative;
  padding: 6px;
  border-radius: 999px;
  background: var(--bar);
  box-shadow: inset 0 0 0 1px var(--line);
  isolation: isolate;
}

.bar__items {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bar__item {
  display: grid;
  place-items: center;
  height: 46px;
  padding: 0 24px;
  border-radius: 999px;
  color: var(--text);
  font-size: 15px;
  font-weight: 560;
  letter-spacing: 0.005em;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: color 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  a.bar__item:hover {
    color: #fff;
  }
}

a.bar__item:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
}

/* the pill: the same items again, black on white, cut by a clip-path that the script moves */
.bar__pill {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 6px;
  border-radius: 999px;
  background: var(--pill);
  clip-path: inset(6px 100% 6px 0 round 999px);
  pointer-events: none;
}

.bar__pill .bar__item {
  color: var(--on);
}

/* the light under the pill: a blurred white shape that follows it */
.bar__glow {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: -1;
  width: 100px;
  height: 34px;
  margin-top: -17px;
  border-radius: 999px;
  background: #fff;
  opacity: var(--glow);
  filter: blur(18px);
  transform-origin: 0 50%;
  pointer-events: none;
}

@media (max-width: 420px) {
  .bar__item {
    padding: 0 15px;
    font-size: 14px;
  }
}