/* a11y.css — primitives the template had none of. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--d);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100010;
  padding: 0.75em 1.25em;
  background: var(--d);
  color: var(--l);
  font-family: var(--f-nm);
  font-size: 0.8rem;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-120%);
  transition: transform 0.2s;
}

.skip-link:focus { transform: translateY(0); }

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

/* The menu toggle was a <div> with a click handler. */
.nav-toggler {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Display scale, decoupled from the heading level: the wordmark copies in the
   preloader and the second word of a two-word lockup are decoration. */
.dsp {
  font-family: var(--f-h);
  line-height: 0.85;
  text-transform: uppercase;
}

/* Selection was off document-wide; only the moving chrome needs it. */
.preloader,
.split-overlay,
.tags-overlay,
.work-carousel,
canvas { user-select: none; }

/* SplitText builds spans so it never puts a <div> in a heading; a line still
   has to be a block or two of them share one line box. */
.line,
.line-mask,
.split-line,
.split-line-mask {
  display: block;
}

.word, .word-mask, .char, .char-mask { display: inline-block; }

/* The menu is built in script, so the pages are unreachable without it. */
.nav-fallback {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100005;
  display: flex;
  gap: 1.25rem;
  width: 100%;
  padding: 1.25rem 1.5rem;
  list-style: none;
  background: var(--d);
}

.nav-fallback a {
  color: var(--l);
  font-family: var(--f-nm);
  font-size: 0.85rem;
  text-transform: uppercase;
  text-decoration: none;
}

.nav-fallback a[aria-current="page"] { text-decoration: underline; }