:root {
  --void: #07060a;
  --night: #121017;
  --ink: #b9b2c6;
  --pearl: #f6f1e7;
  --gold: #e8c26e;
  --violet: #9b7bff;
  --line: rgba(246, 241, 231, 0.1);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--void); color: var(--pearl); }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--gold); }
.wrap { max-width: 760px; margin: 0 auto; padding: 32px 20px 80px; }
header.top { display: flex; align-items: center; gap: 12px; margin-bottom: 40px; }
header.top img { width: 40px; height: 40px; border-radius: 10px; }
header.top a { color: var(--pearl); text-decoration: none; font-weight: 700; letter-spacing: 0.12em; }
h1 { font-size: clamp(32px, 6vw, 52px); line-height: 1.1; margin: 0 0 12px; }
h1 em { font-style: italic; color: var(--violet); font-family: Georgia, serif; font-weight: 400; }
h2 { font-size: 20px; margin: 36px 0 8px; color: var(--gold); }
p, li { color: var(--ink); }
.lead { font-size: 19px; color: var(--pearl); opacity: 0.85; }
.card { background: var(--night); border: 1px solid var(--line); border-radius: 20px; padding: 24px; margin: 28px 0; }
.pill { display: inline-block; padding: 10px 18px; border-radius: 999px; background: var(--gold); color: var(--void); font-weight: 700; text-decoration: none; margin: 6px 8px 0 0; }
.pill.ghost { background: transparent; color: var(--pearl); border: 1px solid var(--line); }
footer { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; }
footer a { margin-right: 16px; color: var(--ink); }
.muted { font-size: 14px; color: #8a8496; }