:root {
  --bg: #060607;
  --fg: #e9e9ee;
  --muted: #8a8a93;
  --line: rgba(255, 255, 255, .1);
}

html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  font: 15px/1.7 "Helvetica Neue", Arial, system-ui, sans-serif;
}

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

header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 60px;
}
.header-right { display: flex; align-items: center; gap: 20px; }

.brand {
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 700; color: #fff; text-decoration: none;
}
.brand:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 4px; border-radius: 2px;
}

.back {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
}
.back:hover { color: #fff; }
.back:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 4px; border-radius: 2px;
}

h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.sub { color: var(--muted); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; margin: 10px 0 44px; }
h2 { font-size: .95rem; font-weight: 700; margin: 34px 0 8px; }
p { margin-bottom: 12px; }
a { color: var(--fg); }
a:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; border-radius: 2px; }

.muted { color: var(--muted); font-size: .92rem; }

footer {
  margin-top: 60px; padding-top: 22px; border-top: 1px solid var(--line);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); display: flex; gap: 22px;
}
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: #fff; }