/* =========================
   HEADER
========================= */

.header {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 100;
  width: max-content;
}

.header .container {
  width: auto;
  padding: 0;
}

.header-pill {
  position: relative;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 40px;
  box-sizing: border-box;
  padding: 0 20px 0 4px;
}

.header-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-black-10);
  border-radius: var(--radius-12);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  z-index: 0;
}

.logo {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.logo img {
  width: 56px;
  height: 36px;
  object-fit: contain;
  display: block;
}

.header-menu {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* backdrop-filter is not blocked by stacking contexts the way
   mix-blend-mode is (confirmed via MDN's backdrop-root list - position,
   z-index and transform aren't on it), so this reaches the real page
   content behind position:fixed. Each overlay is masked to the shape of
   what it sits over (logo image alpha, or per-link SVG text) so only that
   shape shows the inverted backdrop; everything else stays transparent and
   the plain logo/text underneath remains visible as a fallback. */
.invert-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  backdrop-filter: invert(1);
  -webkit-backdrop-filter: invert(1);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.invert-mask--logo {
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* The menu mask's box is only as tall as the h3 line box, so descenders
   (the "j" in "Project", etc.) fall outside it and the invert effect gets
   cut off at the box edge even though the underlying letterform is whole.
   Extend the box vertically so descenders are covered; the SVG mask still
   only reveals the actual glyph shapes, so this adds no visible padding. */
.invert-mask--menu {
  top: -6px;
  bottom: -6px;
}

.lang {
  display: flex;
  align-items: center;
}

.header-link {
  color: var(--color-white);
  text-decoration: none;
}

@supports (backdrop-filter: invert(1)) {
  .header-link h3 {
    color: transparent;
  }

  .logo img {
    opacity: 0;
  }
}

.header-link:hover {
  color: var(--color-grey-400);
}

.header-link h3 {
  margin: 0;
  white-space: nowrap;
  /* Measured gap around the text was 20px top / 14px bottom - the larger
     top gap means the text already sits low, so it needs to move UP by
     half the difference to land at ~17px/17px. Scoped to the menu only -
     global h1/h2/h3 stay untouched since text-box-trim broke multi-line
     headings elsewhere on the site. */
  transform: translateY(-2px);
}

/* =========================
   LINKS
========================= */

.link {
  color: inherit;
  text-decoration: none;
}

.link--normal {
  color: var(--color-black);
}

.link--normal:hover {
  color: var(--color-grey-600);
}

.link--exclusion {
  color: var(--color-white);
}

.link--exclusion:hover {
  color: var(--color-grey-400);
}

/* =========================
   TEXT
========================= */

/* =========================
   GLOBAL LINKS
========================= */

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

/* =========================
   MOBILE
========================= */

@media (max-width: 900px) {

  .header {
    right: 16px;
    width: auto;
  }

  .header .container {
    width: 100%;
  }

  .header-pill {
    width: 100%;
    justify-content: space-between;
  }

}

/* =========================
   STATE
========================= */

.load-error {
  padding: var(--space-40) var(--space-16);
  text-align: center;
  color: var(--color-grey-400);
}