/* ==========================================================================
   Utilities
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: var(--gutter);
  z-index: calc(var(--z-header) + 1);
  padding: 12px 18px;
  background-color: var(--color-accent);
  color: var(--color-ink);
  font: 600 var(--text-label)/1 var(--font-mono);
  letter-spacing: 0.18em;
  translate: 0 -200%;
}

.skip-link:hover,
.skip-link:focus-visible {
  color: var(--color-ink);
}

.skip-link:focus-visible {
  translate: none;
}

/* Image focal points: compose an x and a y class on any .media__image. */
.focus-x-25 { --focus-x: 25%; }
.focus-x-30 { --focus-x: 30%; }
.focus-x-40 { --focus-x: 40%; }
.focus-x-55 { --focus-x: 55%; }
.focus-x-60 { --focus-x: 60%; }
.focus-x-70 { --focus-x: 70%; }
.focus-y-40 { --focus-y: 40%; }
.focus-y-45 { --focus-y: 45%; }
.focus-y-55 { --focus-y: 55%; }
.focus-y-60 { --focus-y: 60%; }
.focus-y-65 { --focus-y: 65%; }