/* ==========================================================================
   Base — reset, typography, global elements
   ========================================================================== */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
  transition:background-color .35s ease, color .35s ease;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.12;
  margin:0;
  letter-spacing:-0.01em;
}
p{margin:0;color:var(--muted);line-height:1.65;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{margin:0;padding:0;}
button{font-family:inherit;}
::selection{background:var(--teal);color:var(--ink);}

.mono{font-family:var(--font-mono);}

.container{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;}

main{position:relative;z-index:1;}

section{padding:120px 0;position:relative;}
@media(max-width:768px){
  section{padding:76px 0;}
}

/* Sections default to a solid surface so copy stays legible; sections that
   opt into the mesh showing through use .glass-section (see components.css) */
section:not(.hero):not(.page-hero){background:var(--ink);}
.section-alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}

@media(prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}

/* Global fixed 3D background canvas — sits behind every page */
#bg-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:-1;
  opacity:0;
  transition:opacity 1.6s ease;
  background:var(--ink);
}
#bg-canvas.ready{opacity:1;}
/* The 3D scene's fog/materials are tuned for the dark backdrop; on light
   theme we keep it very subtle rather than re-theming the WebGL scene. */
html[data-theme="light"] #bg-canvas.ready{opacity:0.4;}