/* Global chrome lifted out of the homepage's embedded <style> block so other
   pages can share it. Load it before the page stylesheet.

   The fluid root size is the important one: the homepage scales every rem with
   the viewport, so its headlines settle instead of shouting. A page on a
   fixed 16px root renders the same rem values noticeably heavier. */

html {
  font-size: calc(0.625rem + 0.41666666666666663vw);
}

@media screen and (max-width: 1920px) {
  html {
    font-size: calc(0.625rem + 0.41666666666666674vw);
  }
}

@media screen and (max-width: 1440px) {
  html {
    font-size: calc(0.8126951092611863rem + 0.20811654526534862vw);
  }
}

@media screen and (max-width: 479px) {
  html {
    font-size: calc(0.7494769874476988rem + 0.8368200836820083vw);
  }
}

body {
  hyphens: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Scrollbar — the one place the homepage lets the accent read at full strength. */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  border: 1px solid rgba(44, 44, 44, .2);
}

::-webkit-scrollbar-thumb {
  background: rgb(191, 153, 83);
  border: none;
}

*[tabindex]:focus-visible {
  outline: .125rem solid #4d65ff;
  outline-offset: .125rem;
}

.container-medium,
.container-small,
.container-large {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Lenis */
html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}