/* Base styles (keep minimal). */
html,body{height:100%; margin:0}
body{
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  background: var(--bg-fallback);
  color: var(--ink);
}

h1, h2, h3, .brand {
  font-family: var(--font-sans);
  color: var(--ink);
  letter-spacing: -0.02em;
}

h1{
  font-size: clamp(48px, 6vw, 84px);
  line-height: 1.02;
  font-weight: 700;
}

p{
  max-width: 60ch;
  color: color-mix(in srgb, var(--ink) 88%, var(--muted));
}

#dots{position:fixed; inset:0; width:100%; height:100%; display:block}
@media (prefers-reduced-motion: reduce){ #dots{ display:none; } }

/* Sections just to create scrollable space, style later */
#content { position: relative; z-index: 1; }
.stage {
  min-height: 100vh;            /* one full screen each */
  display: grid;
  place-content: center;
  padding: 2rem;
  text-align: center;
  color: #ffffff;               /* readable over your BG */
}
.stage h1, .stage h2 { margin: 0 0 .5rem; }

/* Hide scrollbar but keep scroll functionality */
html {
  scrollbar-width: none;        /* Firefox */
}

html::-webkit-scrollbar {
  display: none;                /* Chrome, Safari */
}