:root {
  --fundo: #0c120c;
  --painel: #f8f8f0;
  --tinta: #22261f;
  --apagado: #62695d;
  --borda: #3a4038;
  --amarelo: #f8e858;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% -15rem, #3b573c 0, transparent 38rem),
    var(--fundo);
  color: var(--painel);
  font-family: "Avenir Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.62;
}

header, main { width: min(760px, calc(100% - 30px)); margin: 0 auto; }
header { padding: 48px 0 25px; }
header > a { color: #c6d4c2; }
header > p:not(.resumo) {
  margin: 35px 0 0;
  color: var(--amarelo);
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .16em;
}
h1 { margin: 2px 0 10px; font-size: clamp(2.5rem, 10vw, 5rem); line-height: .98; }
.resumo { max-width: 660px; margin: 0; color: #c6d4c2; font-size: 1.18rem; }

main { padding-bottom: 60px; }
section {
  margin: 14px 0;
  padding: 21px 24px;
  background: var(--painel);
  color: var(--tinta);
  border: 2px solid var(--borda);
  border-radius: 15px;
  box-shadow: 5px 7px 0 rgba(0, 0, 0, .24);
}
section.destaque { border-color: #c19d10; background: #fffbe1; }
h2 { margin: 0 0 7px; line-height: 1.2; }
p { margin: 8px 0; }
ul { margin: 8px 0; padding-left: 1.3rem; }
li + li { margin-top: 4px; }
small { color: var(--apagado); }

@media (max-width: 520px) {
  header { padding-top: 28px; }
  section { padding: 17px 18px; }
}