/* Reset, typography primitives, nav and buttons. */

/* ═══════════════ BASE ═══════════════ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);color:var(--text);
  font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.shell{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
a{color:inherit}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}
::selection{background:var(--signal);color:var(--signal-ink)}

.eyebrow{
  font-family:var(--font-mono);font-size:var(--fs-mono-xs);font-weight:500;
  letter-spacing:var(--tr-wider);text-transform:uppercase;color:var(--signal);
}
.label{
  font-family:var(--font-mono);font-size:var(--fs-mono-xs);font-weight:500;
  letter-spacing:var(--tr-wider);text-transform:uppercase;color:var(--muted);
}
h1,h2,h3{font-family:var(--font-display);letter-spacing:var(--tr-tight);line-height:var(--lh-snug)}
.skip{position:absolute;left:-9999px;top:0;padding:var(--s3) var(--s5);background:var(--signal);color:var(--signal-ink);z-index:100;font-family:var(--font-mono);font-size:var(--fs-mono)}
.skip:focus{left:var(--s4);top:var(--s4)}

/* ═══════════════ NAV ═══════════════ */
header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--ink) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:var(--border) solid var(--line);
}
nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s6);padding:var(--s5) 0}
.brand{
  font-family:var(--font-display);font-weight:700;font-size:1.1875rem;
  letter-spacing:-.025em;text-decoration:none;display:flex;align-items:center;gap:var(--s3);
}
.brand span{color:var(--signal)}
.brand svg{color:var(--signal);flex-shrink:0}
.navlinks{display:flex;gap:var(--s8);list-style:none}
.navlinks a{
  font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--tr-wide);
  text-transform:uppercase;color:var(--muted);text-decoration:none;
  transition:color var(--dur-fast) var(--ease);
}
.navlinks a:hover{color:var(--signal)}
.nav-right{display:flex;align-items:center;gap:var(--s4)}
.icon-btn{
  width:34px;height:34px;display:grid;place-items:center;
  border:var(--border) solid var(--line);border-radius:var(--radius);
  background:transparent;color:var(--muted);cursor:pointer;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.icon-btn:hover{color:var(--signal);border-color:var(--signal)}
.auto-btn{font-family:var(--font-mono);font-size:var(--fs-mono-xs);letter-spacing:var(--tr-wide);
  text-transform:uppercase;padding:7px 11px;border-radius:var(--radius);cursor:pointer;
  border:var(--border) solid var(--line);background:transparent;color:var(--muted);
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.auto-btn:hover{color:var(--signal);border-color:var(--signal)}
.auto-btn[hidden]{display:none}

/* ═══════════════ BUTTON ═══════════════ */
.btn{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-family:var(--font-mono);font-size:var(--fs-mono);font-weight:500;
  letter-spacing:var(--tr-wide);text-transform:uppercase;text-decoration:none;
  padding:13px 22px;border-radius:var(--radius);
  border:var(--border) solid var(--line);color:var(--text);background:transparent;
  cursor:pointer;transition:all var(--dur-fast) var(--ease);
}
.btn--primary{background:var(--signal);border-color:var(--signal);color:var(--signal-ink);font-weight:600}
.btn--primary:hover{filter:brightness(1.1)}
.btn--ghost:hover{border-color:var(--signal);color:var(--signal)}