:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #080808;
  color: #e7e7e7;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: radial-gradient(circle at top, #282111 0, #0c0c0c 34rem, #080808 100%);
  line-height: 1.65;
}

main {
  width: min(100% - 2rem, 70rem);
  margin: 0 auto;
  padding: 5rem 0;
}

h1, h2, h3 { line-height: 1.15; }
h1 { max-width: 14ch; margin: .4rem 0 1rem; font-size: clamp(2.7rem, 8vw, 5.6rem); }
h2 { margin-top: 0; color: #f2ca50; }
h3 { color: #fff; }

.eyebrow {
  color: #f2ca50;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.lead { max-width: 48rem; color: #b8b8b8; font-size: 1.2rem; }

.notice, section {
  margin-top: 2rem;
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 1px solid #2d2d2d;
  border-radius: 1.25rem;
  background: rgba(16, 16, 16, .88);
}

.notice { border-color: #806c2e; background: rgba(128, 108, 46, .12); }
.notice strong { display: block; color: #f2ca50; }

.columns { display: grid; gap: 1rem; }
.columns article { padding: 1rem; border-radius: .8rem; background: #111; }

li + li { margin-top: .6rem; }
code { color: #f2ca50; }
.fr-summary { border-color: #3a3320; }
footer { padding: 2rem .5rem 0; color: #777; font-size: .85rem; }

@media (min-width: 760px) {
  .columns { grid-template-columns: 1fr 1fr; }
}