:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  background: #08090b;
  color: #f2f0ea;
}

body {
  margin: 0;
  background: radial-gradient(circle at 80% 0%, #14251f 0, #08090b 42%);
}

main { max-width: 900px; margin: 0 auto; padding: 8rem 2rem; }
h1 { max-width: 820px; font-size: clamp(2.6rem, 7vw, 5.8rem); line-height: .98; letter-spacing: -.06em; }
h2 { margin-top: 4rem; font-size: 2rem; letter-spacing: -.04em; }
h3 { margin-top: 2rem; font-size: 1.25rem; }
p, li { color: #b7bbb6; font-size: 1.05rem; line-height: 1.8; }
a { color: #9cf5c7; }
.label { color: #9cf5c7; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; }
.lede { max-width: 760px; font-size: 1.25rem; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.card { border: 1px solid #26342e; padding: 1.25rem; background: #0d1210; }
.card p { margin-bottom: 0; }
.meta { color: #77827b; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
nav { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 3rem; }
img { display: block; width: 100%; margin-top: 1rem; border: 1px solid #26342e; }
@media (max-width: 640px) {
  main { padding: 5rem 1.25rem; }
  .facts { grid-template-columns: 1fr; }
}
