@font-face {
  font-family: Inter;
  src: url('/fonts/inter-latin-400.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url('/fonts/inter-latin-700.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* The image is the default; hide it only after a successful WebGL render. */
[data-img='stan'] { display: block; width: 100%; height: auto; opacity: 1; }
.section__second { position: relative; }
#distorted-pixels {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}
.is-distorted [data-img='stan'] { opacity: 0; }
.is-distorted #distorted-pixels { opacity: 1; }

.section__first { padding: 4rem 2rem 4rem 0; }
.link { flex-wrap: wrap; align-items: baseline; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.skip-link { position: fixed; top: -6rem; left: 1rem; z-index: 10; background: white; color: black; padding: .75rem 1rem; }
.skip-link:focus { top: 1rem; }
.section__404 { min-height: 100svh; }

@media (max-width: 1080px), (prefers-reduced-motion: reduce), (hover: none) {
  .is-distorted [data-img='stan'] { opacity: 1; }
  .is-distorted #distorted-pixels { opacity: 0; }
}
@media (max-width: 767px) {
  .flex-horizontal { flex-direction: column; }
  .section__first, .section__second { width: 100%; }
  .section__first { padding: 3rem 0 2rem; }
  h1 { font-size: clamp(2.25rem, 9vw, 3.5rem); }
  .section__second { max-width: 36rem; }
}