@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800&family=Hanken+Grotesk:wght@400;500;600&family=Spline+Sans+Mono:wght@400&display=swap");

:root {
  --ink: #08090c;
  --ink-2: #0d1017;
  --ink-3: #141925;
  --amber: #f5a623;
  --cyan: #29d6d6;
  --paper: #f3f5f8;
  --muted: #8b93a2;
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.055);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ink);
  color: var(--paper);
  font: 400 16px/1.62 "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

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

header {
  display: flex; align-items: center; gap: 11px;
  padding-bottom: 22px; margin-bottom: 30px;
  border-bottom: 1px solid var(--line-2);
}
header .mark { width: 26px; height: 26px; display: block; }
.brand {
  font: 800 21px/1 "Archivo", sans-serif;
  letter-spacing: -0.025em; color: var(--paper); text-decoration: none;
}
.brand .dot { color: var(--amber); }

h1 { font: 800 33px/1.16 "Archivo", sans-serif; letter-spacing: -0.03em; margin: 0 0 8px; text-wrap: balance; }
h2 { font: 700 19px/1.3 "Archivo", sans-serif; letter-spacing: -0.01em; margin: 36px 0 10px; }
.lead { color: var(--muted); font-size: 17px; margin: 0 0 26px; max-width: 56ch; }
p, li { color: #d7dae0; }
p { max-width: 62ch; }
.muted { color: var(--muted); }
.updated { color: var(--muted); font: 400 13px/1 "Spline Sans Mono", monospace; letter-spacing: 0.02em; }
.rule { border: 0; border-top: 1px solid var(--line-2); margin: 34px 0; }

.btn {
  display: inline-block; margin-top: 6px;
  background: var(--amber); color: #1c1200;
  font-weight: 700; padding: 12px 22px; border-radius: 10px;
  letter-spacing: 0.005em;
}
.btn:hover { text-decoration: none; filter: brightness(1.05); }

footer {
  margin-top: 52px; padding-top: 22px;
  border-top: 1px solid var(--line-2);
  color: var(--muted); font-size: 13px;
}
footer a { color: var(--muted); }