:root{ --accent:#c7d64b; --warm:#d9a441; --pos:#8fbf4d; --neg:#d1553f; --bone:#ece6d2; --khaki:#b7a86a; --muted:#8f8d74; --bg0:#0c0d07; --line:#3a3f26; }
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg0); color:var(--bone); font-family:'Space Grotesk',sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--warm); }
::selection{ background:var(--accent); color:#0c0d07; }
@keyframes dustdrift{ from{ background-position:0 0 } to{ background-position:-900px 500px } }
@keyframes flicker{ 0%,100%{ opacity:.9 } 45%{ opacity:.5 } 55%{ opacity:1 } }
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(7px) } }
@keyframes hazepulse{ 0%,100%{ opacity:.5 } 50%{ opacity:.75 } }
@keyframes breathe{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
.navlink:hover span:first-child{ color:var(--accent); }
.navlink:hover span:last-child{ border-color:var(--accent); }
.navlink.active span:first-child{ color:var(--accent); opacity:1; }
.navlink.active span:last-child{ background:var(--accent); border-color:var(--accent); }
/* buttons: top-left and bottom-right corners cut off, hard slab behind for depth, presses in on click */
.btn-fill,.btn-warm,.btn-acc{ position:relative; border:none; cursor:pointer;
  clip-path:polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
  transition:transform .18s cubic-bezier(.2,.8,.2,1), filter .18s ease, background .2s ease, color .2s ease; }
.btn-fill{ background:var(--accent); color:#0c0d07; filter:drop-shadow(5px 5px 0 rgba(0,0,0,.55)); }
.btn-fill:hover{ background:var(--bone); color:#0c0d07; transform:translate(2px,2px); filter:drop-shadow(3px 3px 0 rgba(0,0,0,.55)); }
.btn-acc{ background:#191d0f; color:var(--accent); filter:drop-shadow(4px 4px 0 var(--accent)); }
.btn-acc:hover{ background:var(--accent); color:#0c0d07; transform:translate(2px,2px); filter:drop-shadow(2px 2px 0 rgba(0,0,0,.55)); }
.btn-warm{ background:#16120a; color:var(--warm); filter:drop-shadow(4px 4px 0 var(--warm)); }
.btn-warm:hover{ background:var(--warm); color:#0c0d07; transform:translate(2px,2px); filter:drop-shadow(2px 2px 0 rgba(0,0,0,.55)); }
.btn-fill:active,.btn-warm:active,.btn-acc:active{ transform:translate(4px,4px); filter:drop-shadow(1px 1px 0 rgba(0,0,0,.55)); }
.btn-fill:focus-visible,.btn-warm:focus-visible,.btn-acc:focus-visible{ outline:none; filter:drop-shadow(4px 4px 0 var(--bone)); }
.bootbtn{ width:100%; padding:clamp(28px,6vh,60px) 20px; background:#0f1108; border:none; color:var(--accent);
  font-family:'Space Mono',monospace; font-size:15px; letter-spacing:.18em; text-transform:uppercase; cursor:pointer;
  clip-path:polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  filter:drop-shadow(5px 5px 0 rgba(199,214,75,.3));
  transition:transform .18s cubic-bezier(.2,.8,.2,1), filter .18s ease, background .2s ease, color .2s ease; }
.bootbtn:hover{ background:var(--accent); color:#0c0d07; transform:translate(2px,2px); filter:drop-shadow(3px 3px 0 rgba(0,0,0,.55)); }
.bootbtn:active{ transform:translate(4px,4px); filter:drop-shadow(1px 1px 0 rgba(0,0,0,.55)); }
/* footer contact: the underline keeps sweeping so the address reads as a live thing, not a label */
@keyframes sweep{ 0%{ background-position:180% 0 } 100%{ background-position:-80% 0 } }
.mailto{ display:inline-flex; align-items:center; gap:12px; font-family:'Space Mono',monospace; font-weight:700;
  color:var(--accent); text-decoration:none; line-height:1.2;
  transition:color .2s ease, transform .2s cubic-bezier(.2,.8,.2,1); }
.mailto .addr{ position:relative; padding-bottom:9px; }
.mailto .addr::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg, rgba(199,214,75,.16) 0%, var(--accent) 45%, rgba(199,214,75,.16) 90%);
  background-size:220% 100%; animation:sweep 3.4s linear infinite; }
.mailto .arr{ transition:transform .25s cubic-bezier(.2,.8,.2,1); }
.mailto:hover{ color:var(--bone); transform:translateY(-2px); }
.mailto:hover .addr::after{ background:var(--bone); animation:none; }
.mailto:hover .arr{ transform:translateX(6px); }
.spec:hover{ transform:rotate(0deg) translateY(-3px) !important; }
input[type=range]{ accent-color:var(--warm); }
[data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity 1s ease, transform 1s cubic-bezier(.2,.8,.2,1); }
[data-reveal].in{ opacity:1; transform:none; }
#arcadeCanvas{ display:block; width:100%; height:auto; border:1px solid var(--line); background:#070a08; image-rendering:auto; touch-action:manipulation; -webkit-user-select:none; user-select:none; }
/* the side rail must never sit on top of the content: drop its labels when the
   viewport is too narrow to hold them beside a 1200px column, drop it entirely on mobile */
@media (max-width:1439px){ #sidenav .navlink span:first-child{ display:none; } }
@media (max-width:900px){ #sidenav{ display:none; } }
@media (prefers-reduced-motion:reduce){ *{ animation-duration:.001s !important; } [data-reveal]{ opacity:1 !important; transform:none !important; } }