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

html{
  scroll-behavior:smooth;
}
html,body{
  background:var(--graphite);
  color:var(--bone);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.45;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body[data-theme="light"]{
  background:var(--bone);
  color:var(--graphite);
}

a{color:inherit;text-decoration:none;transition:color var(--dur-fast) var(--ease)}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
img,svg{display:block;max-width:100%}
hr{border:none;height:var(--border);background:var(--line-d)}

::selection{background:var(--bone);color:var(--graphite)}
body[data-theme="light"] ::selection{background:var(--graphite);color:var(--bone)}

canvas#stars{
  position:fixed;
  inset:0;
  z-index:var(--z-canvas);
  display:block;
  pointer-events:none;
  opacity:.45;
}

main{position:relative;z-index:var(--z-content)}

.reveal{
  opacity:0;
  transform:translateY(36px);
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);
  will-change:opacity,transform;
}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--slate);
  display:inline-flex;
  align-items:center;
  gap:14px;
}
.eyebrow::before{
  content:"";
  width:42px;
  height:1px;
  background:var(--ember);
}