:root{
  --bg:#05060a; --ink:#dbe4f5; --muted:#8da0b8; --gold:#ffd36b;
}
*{box-sizing:border-box}
html,body{
  height:100%;margin:0;background:var(--bg);color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial
}
canvas{position:fixed;inset:0;display:block}

/* Overlay */
.overlay{
  position:fixed;inset:0;display:grid;align-content:center;justify-items:center;
  gap:10px;padding:6vh 6vw;pointer-events:none;text-align:center;
  will-change:transform,opacity;
}
.line{
  margin:0;color:var(--ink);line-height:1.45;font-size:clamp(16px,2.1vw,20px);opacity:1;transform:translateY(0);
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));
  transition:transform .45s ease,opacity .45s ease;
}
#title{
  font-weight:800;letter-spacing:.2px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));
  transition:transform .45s ease,opacity .45s ease;
}
.kicker{
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-size:.72rem;margin:0;
  transition:transform .45s ease,opacity .45s ease;
}
/* Titles */
.title-small{font-size:clamp(18px,2.6vw,28px)}
.title-prologue{font-size:clamp(26px,3.8vw,40px)}

/* Scroll driver */
#scroll-spacer{height:100vh}

@media (max-width:700px){
  .overlay{padding:8vh 4vw}
}