:root {
  --bg: #090b0e;
  --bg-2: #12161c;
  --ink: #e8eef4;
  --muted: #8b97a5;
  --teal: #2ee6c8;
  --amber: #e8a54b;
  --line: #24303c;
  --max: 68rem;
}

html { background: var(--bg); color-scheme: dark; }

body {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }

.mark {
  font-family: Syne, sans-serif;
  color: var(--ink);
}
.mark span { color: var(--teal); }
.nav-links a { color: var(--muted); }
.nav-links a:hover { color: var(--ink); }

.hero-shade {
  background: linear-gradient(180deg, transparent 20%, #090b0ee8 92%);
}

.kicker { color: var(--amber); }
.hero h1 { font-family: Syne, sans-serif; }
.hero p { color: var(--muted); }

h2.sec { font-family: Syne, sans-serif; }

.card {
  background: var(--bg-2);
  color: inherit;
}
.card:hover { border-color: var(--teal); }
.tag { color: var(--amber); }
.card h2 { font-family: Syne, sans-serif; }
.card p { color: var(--muted); }

.prose h1 { font-family: Syne, sans-serif; }
.prose .lede {
  font-family: Syne, sans-serif;
  color: var(--ink);
}
.prose p { color: #c5ced6; }

.foot { color: var(--muted); }