* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth}
body {
  margin:0;
  background:#0c0d10;
  color:#f4f4f0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:1rem;
  line-height:1.7}
a {
  color:#ff934f;
  text-underline-offset:.22em}
a:hover {
  color:#fff}
a:focus-visible,summary:focus-visible {
  outline:3px solid #ff934f;
  outline-offset:5px}
p {
  color:#bdc1c8}
h1,h2,h3 {
  line-height:1.15;
  text-wrap:balance}
h1 {
  font-size:clamp(2.4rem,6vw,4.8rem);
  letter-spacing:-.045em;
  max-width:18ch;
  margin:.3em 0}
h2 {
  font-size:clamp(1.7rem,3vw,2.5rem);
  letter-spacing:-.025em}
h3 {
  font-size:1.2rem}
.wrap {
  max-width:1120px;
  margin:auto;
  padding:0 clamp(20px,4vw,40px)}
nav {
  border-bottom:1px solid #343a43}
.nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  padding-top:20px;
  padding-bottom:20px}
.brand {
  color:#f4f4f0;
  display:flex;
  align-items:center;
  text-decoration:none}
.brand img {
  display:block}
.nav-links {
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  font-size:.95rem}
.hero {
  padding-top:64px;
  padding-bottom:64px}
.eyebrow {
  color:#ff934f;
  font-size:.875rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase}
.intro {
  font-size:1.2rem;
  max-width:70ch}
.button {
  display:inline-block;
  background:#ff6a1a;
  color:#0c0d10;
  padding:13px 22px;
  margin:16px 0;
  border-radius:10px;
  text-decoration:none;
  font-weight:800}
.button:hover {
  background:#ff934f;
  color:#0c0d10}
.small {
  font-size:.875rem}
.section {
  border-top:1px solid #343a43;
  padding-top:40px;
  padding-bottom:40px}
.reading {
  max-width:78ch}
blockquote {
  margin:24px 0;
  padding:24px;
  border-left:3px solid #ff6a1a;
  background:#16181d}
blockquote p {
  margin:0;
  color:#f4f4f0}
.grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:16px}
.doc {
  padding:24px;
  background:#16181d;
  border:1px solid #343a43;
  border-radius:12px}
.doc h3 {
  margin-top:0}
.doc p {
  margin-bottom:0}
ol {
  padding-left:24px}
li {
  margin:10px 0}
details {
  border-bottom:1px solid #343a43;
  padding:18px 0}
summary {
  cursor:pointer;
  font-weight:700}
footer {
  border-top:1px solid #343a43;
  padding:32px 0}
footer ul {
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:12px 24px}
.skip {
  position:absolute;
  top:-100px;
  left:20px;
  background:#ff6a1a;
  color:#0c0d10;
  padding:12px}
.skip:focus {
  top:12px}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
}