:root {
  --bg: #141413;
  --text: #F4F1EA;
  --muted: #a9a59a;
  --border: #2c2c29;
  --red: #D7261E;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Space Grotesk", system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--red); }
p { margin: 0 0 1em; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
.small { font-size: .74rem; color: var(--muted); letter-spacing: .02em; }

.page {
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 24px 40px;
}

.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 72px; }
.logo { height: 30px; width: auto; }

h1 { font-size: clamp(2.4rem, 7vw, 3.8rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; margin: 0 0 18px; }
.lead { color: var(--text); font-size: 1.15rem; margin-bottom: 1.5em; }
.body { color: var(--muted); font-size: 1rem; max-width: 560px; }

.chart { margin: 40px 0 56px; }
.chart svg { width: 100%; height: 110px; display: block; }
.chart .line { fill: none; stroke: var(--red); stroke-width: 2; stroke-linejoin: round; }
.chart figcaption { margin-top: 8px; }

.label { font-size: .74rem; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; margin: 0 0 14px; }

.facts { margin-bottom: 48px; }
dl { margin: 0; font-size: .82rem; display: grid; grid-template-columns: max-content 1fr; column-gap: 24px; row-gap: 8px; }
dt { color: var(--muted); }
dd { margin: 0; }

.log { margin-bottom: 56px; }
.log ul { list-style: none; margin: 0; padding: 0; font-size: .82rem; }
.log li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 8px 0; border-top: 1px solid var(--border); }
.log li:last-child { border-bottom: 1px solid var(--border); }
.log li span { color: var(--muted); }

.foot { border-top: 1px solid var(--border); padding-top: 20px; }
.foot p { margin-bottom: 10px; }
.fine { color: var(--muted); font-size: .74rem; max-width: 520px; }

@media (max-width: 480px) {
  .top { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 56px; }
  .logo { height: 26px; }
  dl { grid-template-columns: 1fr; row-gap: 2px; }
  dt { margin-top: 10px; }
}