:root {
  --pit: #0d0f12;
  --panel: #14181d;
  --edge: #232a32;
  --chalk: #eef1f4;
  --dim: #8b959f;
  --amber: #e8a33d;
  --cyan: #3ecfd6;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 20px 80px;
  background: var(--pit);
  color: var(--chalk);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.wrap { max-width: 44rem; margin: 0 auto; }

header {
  padding: 56px 0 28px;
  border-bottom: 1px solid var(--edge);
  margin-bottom: 36px;
}

h1 {
  font-size: 1.9rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  text-transform: uppercase;
  font-weight: 800;
  font-stretch: condensed;
}

h2 {
  font-size: 1.15rem;
  margin: 40px 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--amber);
}

h3 {
  font-size: 1rem;
  margin: 26px 0 6px;
  font-weight: 700;
}

p, li { color: #cdd4db; }

a { color: var(--cyan); }

.lede { color: var(--dim); margin: 0; }

.meta {
  font-size: 0.85rem;
  color: var(--dim);
  margin-top: 6px;
}

.switch {
  margin: 0 0 8px;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}

.switch a { text-decoration: none; }

.card {
  background: var(--panel);
  border: 1px solid var(--edge);
  padding: 18px 20px;
  margin: 28px 0;
}

.card p:first-child { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--edge);
  margin: 64px 0 0;
}

footer {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--edge);
  font-size: 0.85rem;
  color: var(--dim);
}

code {
  background: var(--panel);
  border: 1px solid var(--edge);
  padding: 1px 5px;
  font-size: 0.9em;
}