/* Transparent overlay. `difference` inverts the header against whatever
   scrolls beneath it, so it reads correctly on both light and dark sections. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 30px;
  color: var(--color-white);
  mix-blend-mode: difference;
}

.site-logo {
  display: inline-flex;
}

/* Nav */

.site-nav {
  text-align: right;
}

/* Current section. Graphik is loaded here in Light and Extralight only, so
   there is no bold face to switch to and no variable axis for `font-weight`
   to travel along. Stroking the glyph outline thickens the letterforms the
   way a synthesised bold does, animates as a length, and leaves the text
   metrics untouched -- so the right-aligned stack does not reflow under it. */

.site-nav a {
  -webkit-text-stroke: 0 currentColor;
  transition: opacity 200ms, -webkit-text-stroke-width 300ms;
}

.site-nav a.is-current {
  -webkit-text-stroke-width: 0.6px;
}

/* Hamburger. Three 1px rules, 27 wide on a 10px pitch. currentColor is the
   header's white, which the difference blend inverts to black over a light
   section, so the icon needs no per-section fill of its own. */

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 9px;
  align-self: center;
}

.nav-toggle__bar {
  width: 27px;
  height: 1px;
  background: currentColor;
}

/* Hidden while the homepage's own copy of these links is still on screen.
   nav.js adds and removes the class; the homepage renders with it already
   set so the links never flash before the first observer callback. */

.site-nav,
.nav-toggle {
  transition: opacity 300ms, visibility 300ms;
}

.is-nav-hidden .site-nav,
.is-nav-hidden .nav-toggle {
  opacity: 0;
  visibility: hidden;
}

.site-logo img {
  width: 45px;
  height: 45px;
  filter: invert(1);
}

/* Menu link reveal. The list fades in one link at a time, 100ms apart, every
   time it comes back into view: on load, after the intro, on returning to the
   homepage's top section, and each time the overlay opens. nav.js owns the
   class -- the header's own copy of the list is never revealed this way and
   so is left out of these selectors. */

.menu__links li,
.nav-overlay__links li {
  opacity: 0;
}

.menu__links.is-revealed li,
.nav-overlay__links.is-revealed li {
  opacity: 1;
  transition: opacity 800ms;
  transition-delay: calc(var(--reveal-delay, 0ms) + var(--index, 0) * 100ms);
}

/* The beat before the first link, which the stagger then counts up from. */

.menu__links,
.nav-overlay__links {
  --reveal-delay: 100ms;
}

/* CSS has no portable sibling counter -- a fifth link needs a fifth line. */

.menu-links li:nth-child(2) {
  --index: 1;
}

.menu-links li:nth-child(3) {
  --index: 2;
}

.menu-links li:nth-child(4) {
  --index: 3;
}

.menu-links li:nth-child(5) {
  --index: 4;
}

/* Menu overlay. A copy of the homepage's top section -- the same centred list
   on the same ground -- laid over the whole page, logo included. */

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms, visibility 300ms;
}

html.is-nav-open .nav-overlay {
  opacity: 1;
  visibility: visible;
}

/* Locking the scroller through body rather than html: the intro leaves
   `overflow: visible` on html, which would win over anything set here. */
html.is-nav-open body {
  overflow: hidden;
}

/* Repeats the header's geometry so the close lands where the hamburger was
   instead of jumping to a different spot. */
.nav-overlay__bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 45px;
  padding-top: 30px;
  padding-inline: 30px;
}

.nav-close {
  position: relative;
  width: 27px;
  height: 27px;
}

.nav-close__bar {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transform: rotate(45deg);
}

.nav-close__bar:last-child {
  transform: rotate(-45deg);
}

.nav-overlay__nav {
  margin: auto;
}

.nav-overlay__links {
  font-family: var(--font-cardinal-fruit);
  font-size: var(--type-heading-size);
  line-height: 1.5;
  text-align: center;
}


/* mobile breakpoint: 768px */
@media (max-width: 768px) {
  .site-nav {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }
}