:root {
  --ink: #0a0a0a;
  --card: #141414;
  --line: #232323;
  --bone: #e8e4dc;
  --muted: #9a958c;
  --faint: #5f5b54;
  --amber: #e8a33d;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--ink);
  color: var(--bone);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}

header.site {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 56px;
}

.logo {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bone);
  text-decoration: none;
}

.logo span { color: var(--amber); }

nav a {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  margin-left: 18px;
}

nav a:hover { color: var(--amber); }

h1 {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 12px;
}

.updated {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--faint);
  margin-bottom: 36px;
}

h2 {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--amber);
  margin: 36px 0 12px;
}

p, li { font-size: 15px; color: var(--bone); }
p.lede { font-size: 17px; color: var(--muted); margin-bottom: 8px; }
ul { list-style: none; }
li { padding-left: 18px; position: relative; margin-bottom: 10px; }
li::before { content: "—"; position: absolute; left: 0; color: var(--faint); }

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

.hero { padding: 40px 0 24px; }
.hero h1 { font-size: 52px; line-height: 1.1; }
.hero .tag {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 20px;
}
.hero p { font-size: 18px; color: var(--muted); max-width: 480px; margin-top: 16px; }

.badge {
  display: inline-block;
  margin-top: 36px;
  padding: 14px 28px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--bone);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  letter-spacing: 1px;
  text-decoration: none;
}

footer.site {
  margin-top: 80px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

footer.site, footer.site a {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--faint);
  text-decoration: none;
}

footer.site a:hover { color: var(--amber); }