/* ==========================================================================
   Reset + base typography + layout primitives
   ========================================================================== */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* Ambient background glow — subtle, not decorative-heavy */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(242,169,59,0.07), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(95,212,232,0.05), transparent 60%);
}

img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 24px; position:relative; z-index:1;}
section{position:relative; z-index:1;}

/* Sticky header covers the top ~80px of the viewport permanently, so anchor
   targets need breathing room above them or the header hides short sections
   entirely (e.g. the stack marquee) and the next section shows underneath it. */
#work, #stack, #process, #contact{scroll-margin-top:84px;}

::selection{background:var(--accent-dim); color:var(--accent);}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;}

.eyebrow{
  font-family:var(--font-mono); font-size:12.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--accent); display:flex; align-items:center; gap:10px; margin-bottom:var(--space-sm);
}
.eyebrow::before{content:""; width:16px; height:1.5px; background:var(--accent); display:inline-block;}

h1,h2,h3{font-family:var(--font-mono); font-weight:600; letter-spacing:-0.01em; line-height:1.15;}
h1{font-size:clamp(2.2rem, 5vw, 3.6rem);}
h2{font-size:clamp(1.7rem, 3.4vw, 2.5rem);}
h3{font-size:1.15rem;}
p{color:var(--text-muted);}
.lede{font-size:1.15rem; color:var(--text-muted); max-width:600px; line-height:1.65;}

.section{padding:var(--space-2xl) 0;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:var(--space-md); margin-bottom:var(--space-xl); flex-wrap:wrap;}
.section-head .lede{margin-bottom:0;}