/* ============================================================
   axelheilborn.com  |  shared tokens + base
   Palette follows control-room convention: neutral grey ground,
   colour reserved for state (loss / gain), never decoration.
   ============================================================ */

:root{
  --canvas:#E4E6E2;
  --surface:#F2F3EF;
  --surface-2:#DBDDD8;
  --ink:#21262B;
  --ink-2:#3A4046;
  --muted:#71787E;
  --rule:#C3C7C0;
  --loss:#8B2F3F;
  --loss-tint:#B4707C;
  --gain:#1F5F4A;
  --gain-tint:#5C9483;
  --focus:#2B4C7E;

  --display:"Space Grotesk",Helvetica Neue,Arial,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --data:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --wrap:1080px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--body);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule)}
a:hover{border-bottom-color:var(--ink)}
a:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* ---------- site bar ---------- */
.sitebar{
  border-bottom:1px solid var(--rule);
  font-family:var(--data);
  font-size:11px;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.sitebar .wrap{
  display:flex;justify-content:space-between;align-items:center;
  gap:18px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap;
}
.sitebar a{border-bottom:0;color:var(--muted)}
.sitebar a:hover{color:var(--ink)}
.sitebar .mark{color:var(--ink);font-weight:600;letter-spacing:.1em}
.sitebar nav{display:flex;gap:20px;flex-wrap:wrap}

/* ---------- section furniture ---------- */
section{padding:52px 0;border-bottom:1px solid var(--rule)}
.sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:8px}
.sec-tag{
  font-family:var(--data);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;
}
.sec-head h2{
  font-family:var(--display);font-weight:700;font-size:21px;
  letter-spacing:-.015em;margin:0;
}
.sec-note{color:var(--muted);font-size:13.5px;max-width:64ch;margin:0 0 26px}

/* ---------- utility ---------- */
.mono{font-family:var(--data);font-variant-numeric:tabular-nums}
.neg{color:var(--loss)}
.pos{color:var(--gain)}

/* ---------- footer ---------- */
footer{
  padding:34px 0 60px;
  font-family:var(--data);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
footer a{border-bottom:0}
footer a:hover{color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
}