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

html {
  background: var(--canvas);
  /* A classic scrollbar would skew vw against the 1440 layouts. */
  scrollbar-width: none;
}
html::-webkit-scrollbar { display: none; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

body {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The light page, behind everything. js/end.js fades it in with the scroll. It runs past the bottom so a phone toolbar sliding away uncovers nothing. */
.tone {
  position: fixed;
  inset: 0 0 -15vh;
  z-index: -1;
  background: #F5F5F2;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

a { color: inherit; text-decoration: none; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--star); outline-offset: 4px; }
[tabindex="-1"]:focus-visible { outline: none; }

.mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .18em;
}

.two-tone {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(40px, min(4.44vw, 7.1vh), 72px);
  line-height: 1.05;
  letter-spacing: -.02em;
}
.two-tone > span { display: block; color: var(--text-primary); }
.two-tone > span + span { color: var(--text-secondary); }

/* A full-size canvas layer inside a sticky stage. */
.layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* OFF STARS, in the hero. */
.display-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 8.6vw;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  will-change: transform, opacity;
}

/* The shooting star trail that replaces the mouse pointer, drawn by js/cursor.js. */
.cursor-fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  pointer-events: none;
}
.trail-pointer, .trail-pointer * { cursor: none !important; }
/* The nav bar and the email address keep a hand, so they read as clickable. */
.trail-pointer .nav, .trail-pointer .nav *, .trail-pointer .end__cta { cursor: pointer !important; }