@font-face {
  font-family: "Basalt Tall";
  src: url("../assets/fonts/basalt-tall.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Basalt Light";
  src: url("../assets/fonts/basalt-light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Basalt Regular";
  src: url("../assets/fonts/basalt-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--bone);
  max-width: 100%;
}

html, body {
  /* The page is exactly one viewport and never scrolls in either axis -
     stations are stepped through, not scrolled to. This is also what keeps
     the promise of no horizontal overflow: there is no scroll container left
     that could overflow. */
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

html { scroll-behavior: auto; }

html[lang="he"] { direction: rtl; }
html[lang="en"] { direction: ltr; }

body {
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, canvas, svg, video { max-width: 100%; display: block; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .backdrop .veil { transition: none !important; }
}