@import url('../assets/css/tokens.css');

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ink-950);
  color: var(--ash-200);
  font: 400 16px/1.7 'Onest', -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { width: min(760px, 100% - 44px); margin-inline: auto; padding: 56px 0 90px; }

.top { display: flex; align-items: center; gap: 11px; margin-bottom: 46px; text-decoration: none; }
.top svg { width: 30px; height: 30px; }
.top b { font: 300 15px/1 'Unbounded', system-ui, sans-serif; color: var(--ash-050); }
.top b span { color: var(--gold-400); }

h1 {
  font: 300 clamp(26px, 4vw, 38px)/1.15 'Unbounded', system-ui, sans-serif;
  letter-spacing: -0.045em;
  color: var(--ash-050);
  margin: 0 0 10px;
}
.upd { color: var(--ash-400); font-size: 13.5px; margin: 0 0 44px; }

h2 {
  font: 500 12px/1.4 'Onest', sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin: 44px 0 14px;
}
h3 { font: 600 16px/1.45 'Onest', sans-serif; color: var(--ash-050); margin: 26px 0 8px; }
p { margin: 0 0 14px; }
ul { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 7px; }
li::marker { color: var(--bronze-500); }
b, strong { color: var(--ash-050); font-weight: 600; }
a { color: var(--gold-300); }

.note {
  border: 1px solid rgba(242,214,138,.22);
  background: rgba(214,166,78,.06);
  border-radius: 16px;
  padding: 18px 22px;
  margin: 26px 0;
  font-size: 15px;
}
.note b { display: block; margin-bottom: 6px; color: var(--gold-200); }

.fill { color: #E0724A; border-bottom: 1px dashed rgba(224,114,74,.5); }

footer {
  border-top: 1px solid var(--ink-700);
  margin-top: 56px; padding-top: 26px;
  font-size: 13px; color: var(--ash-400);
  display: flex; flex-wrap: wrap; gap: 18px;
}
footer a { color: var(--ash-400); text-decoration: none; }
footer a:hover { color: var(--gold-300); }