/* Local header logo experiment. Remove this stylesheet and its matching script to revert. */
:root {
  --header-logo-top: calc(1rem + (1.4 * var(--Fs) + 1.5rem - 25px) / 2);
}

.header__icon.header-logo-trial,
.header-logo-ink {
  position: fixed;
  top: var(--header-logo-top);
  left: var(--Pg);
  z-index: 31;
  height: 25px;
  transition: opacity 0.25s;
}

.header__icon.header-logo-trial {
  color: #fff;
  mix-blend-mode: difference;
}

.header-logo-ink {
  z-index: 32;
  color: var(--black);
  opacity: 0;
  pointer-events: none;
}

.header-logo-trial[data-scrolled="true"] {
  /* Below 50%, the original backdrop dominates and visually cancels inversion. */
  opacity: 0.7;
}

a.header-logo-trial,
.header-logo-ink {
  display: block;
  width: fit-content;
}

.header-logo-trial > svg,
.header-logo-trial > img,
.header-logo-ink > svg,
.header-logo-ink > img {
  display: block;
  width: auto;
  height: 100%;
}

.header-logo-trial svg path {
  fill: #fff;
}

.header-logo-trial:focus-visible {
  opacity: 0;
}

.header-logo-ink svg path {
  fill: var(--black);
}

.header-logo-trial:focus-visible + .header-logo-ink {
  opacity: 1;
}

.header-logo-frost:has(+ .header-logo-trial:focus-visible) {
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .header__icon.header-logo-trial:hover {
    opacity: 0;
  }

  .header-logo-trial:hover + .header-logo-ink {
    opacity: 1;
  }

  .header-logo-frost:has(+ .header-logo-trial:hover) {
    opacity: 0;
  }
}

.header-logo-trial:focus-visible + .header-logo-ink {
  outline: 2px solid var(--black);
  outline-offset: 5px;
  border-radius: var(--corner-radius);
}

/* Frost only the letterforms, using the same SVG as a mask. */
.header-logo-frost {
  position: fixed;
  top: var(--header-logo-top);
  left: var(--Pg);
  z-index: 30;
  height: 25px;
  background: rgb(255 255 255 / 12%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  -webkit-mask: var(--header-logo-mask) center / 100% 100% no-repeat;
  mask: var(--header-logo-mask) center / 100% 100% no-repeat;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.header-logo-frost[data-scrolled="true"] {
  opacity: 1;
}

.header-logo-frost > svg {
  display: block;
  width: auto;
  height: 100%;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .header-logo-trial,
  .header-logo-ink,
  .header-logo-frost {
    transition: none;
  }
}