@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2'),
       url('../fonts/IBMPlexMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-Medium.woff2') format('woff2'),
       url('../fonts/IBMPlexMono-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fbfbf9;
  color: #16181b;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

html { scroll-behavior: smooth; }

a { color: #B4341F; text-decoration: none; }
a:hover { color: #16181b; }

nav::-webkit-scrollbar { display: none; }
nav a { flex: 0 0 auto; white-space: nowrap; }

.navlink:hover { color: #B4341F; }
.btn-dark:hover { background: #B4341F; color: #ffffff; }
.btn-ghost:hover { border-color: #16181b; }
.link-light:hover { color: #ffffff; }

.role-toggle:focus-visible { outline: 2px solid #B4341F; outline-offset: -2px; }
.role-panel[hidden] { display: none; }