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

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

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100010;
  padding: 0.75em 1.25em;
  background: var(--base-1000);
  color: var(--base-100);
  font-family: "DM Mono", monospace;
  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;
}

.c-CareersList_list,
.c-Projects_projects ul,
.c-Stats_list,
.c-Menu_overlayNav,
.c-Footer_columns ul { list-style: none; }

/* Display scale, decoupled from the heading level: half the "headings" here
   are a second word in a lockup, a repeated wordmark or a figure. */
.dsp {
  font-family: "SCHABO", sans-serif;
  font-weight: 400;
  line-height: 0.85;
  text-transform: uppercase;
}

.dsp-1 { font-size: clamp(4rem, 10vw, 10rem); }
.dsp-2 { font-size: clamp(3.5rem, 9vw, 9rem); }
.dsp-3 { font-size: clamp(3rem, 8vw, 8rem); }
.dsp-4 { font-size: clamp(2.5rem, 7vw, 7rem); }

.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.1em; }

/* 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.

   The mask wrappers it inserts are named "<class>-mask-<type>-mask" and carry
   only `overflow: clip` inline — an inline box ignores overflow, so without a
   display here nothing is ever masked and every reveal starts already visible. */
.copy-line,
.copy-mask-line-mask { display: block; }

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

/* Selection was off document-wide; only the moving chrome needs it. */
.c-Preloader_preloader,
.c-TransitionProvider_grid,
.c-Footer_objectContainer { user-select: none; }

/* Links the source never had, because the source never made these clickable.
   Each one has to take the ink of the thing it sits in, not the browser's blue. */
.c-CareersList_wrapper {
  color: inherit;
  text-decoration: none;
}

.c-ContactCards_back a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

.c-ContactCards_back a:hover,
.c-ContactCards_back a:focus-visible { text-decoration-color: currentColor; }