/* The justified nav: the top bar of a small type foundry, Tympan, alone on a white page. Two hairline rules, the name
   and a line of links in Roboto Flex (a variable sans, width 25 to 151 and weight 100 to 1000). The script sets the
   width and the weight of every link, every frame, so that the line always fills the same measure. */
:root {
  --page: #ffffff;                  /* the page */
  --ink: #141414;                   /* the name, the rules, the current link and the one pointed at */
  --grey: #8c887f;                  /* the other links */
  --soft: rgba(20, 20, 20, 0.14);   /* the marks at the ends of the measure and the lines between rows on a phone */
  --accent: #e2432a;                /* the tick over the current page */
}

* {
  box-sizing: border-box;
}

/* a tap is a click at once: no wait for a double tap */
html {
  touch-action: manipulation;
}

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

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Roboto Flex Variable', 'Roboto Flex', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 48px 16px;
}

a,
button {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

a:focus,
button:focus {
  outline: none;
}

/* ---------------------------------------------------------------- the bar */
.bar {
  position: relative;
  display: flex;
  align-items: stretch;
  width: min(660px, 100%);
  height: 60px;
  padding: 0 2px;
}

/* two hairline rules, drawn from the left when the page opens */
.bar__rule {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ink);
  transform-origin: 0 50%;
  pointer-events: none;
}

.bar__rule--top {
  top: 0;
}

.bar__rule--bottom {
  bottom: 0;
}

/* ---------------------------------------------------------------- the name */
.brand {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  margin-right: 46px;
}

.brand__word {
  display: block;
  font-size: 19px;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variation-settings: 'wdth' 52, 'wght' 820;
}

.brand:focus-visible .brand__word {
  outline: 1px solid var(--ink);
  outline-offset: 6px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------- the links: one justified line */
.nav {
  position: relative;
  flex: 1;
  min-width: 0;
}

/* where the measure starts and ends: two short marks standing on the bottom rule */
.nav__end {
  position: absolute;
  bottom: 1px;
  width: 1px;
  height: 6px;
  background: var(--soft);
  pointer-events: none;
}

.nav__end--start {
  left: 0;
}

.nav__end--end {
  right: 0;
}

/* the first word is flush with the start of the measure and the last with its end: the script sets the widths */
.list {
  display: flex;
  justify-content: space-between;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.item {
  display: flex;
  height: 100%;
}

.link {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  color: var(--grey);
  font-size: 17px;
  line-height: 1;
  white-space: nowrap;
  transition: color 0.3s ease;
  user-select: none;
  -webkit-user-select: none;
}

.link[aria-current='page'],
.link.is-lit {
  color: var(--ink);
}

.link__word {
  display: block;
  font-variation-settings: 'wdth' 100, 'wght' 380;
}

/* the keys: a thin frame round the word, which widens with it */
.link:focus-visible .link__word {
  outline: 1px solid var(--ink);
  outline-offset: 6px;
  border-radius: 2px;
}

/* the tick over the current page hangs from the top rule; the mark places it, the script draws it down */
.link__mark {
  position: absolute;
  top: 1px;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.link__tick {
  position: absolute;
  top: 0;
  left: -1px;
  width: 2px;
  height: 12px;
  background: var(--accent);
  transform-origin: 50% 0;
  transform: scaleY(0);
}

/* ---------------------------------------------------------------- the button, only on a phone */
.toggle {
  display: none;
}

/* ---------------------------------------------------------------- a phone: the links open in a column */
@media (max-width: 760px) {
  .bar {
    height: 56px;
    padding: 0;
  }

  .brand {
    margin-right: auto;
  }

  .toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0 2px 0 16px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 15px;
    cursor: pointer;
  }

  .toggle__label {
    display: block;
    font-variation-settings: 'wdth' 100, 'wght' 460;
  }

  .toggle__icon {
    width: 20px;
    height: 20px;
    overflow: visible;
  }

  .toggle__line {
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.5;
    stroke-linecap: round;
  }

  .toggle:focus-visible .toggle__label {
    outline: 1px solid var(--ink);
    outline-offset: 6px;
    border-radius: 2px;
  }

  /* the panel under the bar: its height never changes, the rows share it */
  .nav {
    --row: 46px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 2;
    background: var(--page);
    border-bottom: 1px solid var(--ink);
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    touch-action: none;
  }

  .nav__end {
    display: none;
  }

  .list {
    flex-direction: column;
    justify-content: flex-start;
    height: auto;
  }

  .item {
    height: var(--row);
    border-bottom: 1px solid var(--soft);
    overflow: hidden;
  }

  .item:last-child {
    border-bottom: 0;
  }

  .link {
    width: 100%;
    padding-left: 22px;
  }

  /* on its side: the same tick, hanging from the left edge of the row */
  .link__mark {
    top: 50%;
    left: 0;
    transform: rotate(-90deg);
  }

  .link__tick {
    height: 14px;
  }
}

/* moving less: the panel fades, nothing slides */
@media (prefers-reduced-motion: reduce) {
  .link {
    transition: color 0.2s ease;
  }
}