@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/IBMPlexSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/IBMPlexSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-Variable.woff2') format('woff2-variations'),
       url('/fonts/Satoshi-Variable.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --pico-font-family: var(--font-sans);
  --pico-font-size: var(--text-base);
  --pico-line-height: 1.5;
  --pico-background-color: hsl(var(--background));
  --pico-color: hsl(var(--neutral-900));
  --pico-h1-color: hsl(var(--neutral-900));
  --pico-h2-color: hsl(var(--neutral-900));
  --pico-h3-color: hsl(var(--neutral-900));
  --pico-primary: hsl(var(--primary));
  --pico-primary-hover: hsl(var(--neutral-800));
  --pico-primary-focus: hsl(var(--ring) / 0.2);
  --pico-primary-inverse: hsl(var(--primary-foreground));
  --pico-muted-color: hsl(var(--muted-foreground));
  --pico-border-color: hsl(var(--border));
  --pico-card-background-color: hsl(var(--card));
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: hsl(var(--background));
  color: hsl(var(--neutral-900));
  font-family: var(--font-sans);
}

main {
  flex: 1;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-snug);
}

.site-header {
  margin-bottom: var(--space-6);
  border-bottom: 1px solid hsl(var(--neutral-800));
  background: hsl(var(--neutral-900));
}

.site-header nav {
  min-height: 56px;
  margin: 0 auto;
}

.site-header ul {
  margin: 0;
}

.site-header a {
  color: hsl(var(--neutral-300));
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.site-header a:hover {
  color: hsl(var(--neutral-050));
}

.brand {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  text-decoration: none;
}

.brand img {
  display: block;
  height: 30px;
  width: auto;
}

table thead th {
  background: hsl(var(--neutral-050));
  color: hsl(var(--neutral-600));
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

table tbody td:nth-child(4),
table tbody td:nth-child(5) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

a {
  color: hsl(var(--neutral-900));
}

a:hover {
  color: hsl(var(--accent-700));
}

.site-footer {
  border-top: 1px solid hsl(var(--border));
  margin-top: var(--space-8);
  padding-top: var(--space-3);
}