@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600&family=Bitter:wght@700&display=swap');

:root{
  --paper:#f7f9fc;
  --ink:#17263a;
  --blue:#2d61b8;
  --green:#2f8b70;
  --orange:#dc7041;
  --line:#d7e0eb;
}

*{box-sizing:border-box}

body{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:"Source Sans 3",sans-serif;
}

header{
  padding:2rem max(1.5rem,7vw) 4rem;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 90% 10%,rgba(45,97,184,.12),transparent 25rem),
    white;
}

nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem 1.3rem;
  margin:0 0 5rem;
  padding:0;
  list-style:none;
}

nav a{
  color:var(--blue);
  font-weight:600;
  text-decoration:none;
}

.eyebrow{
  color:var(--orange);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.76rem;
  font-weight:600;
}

h1,h2{font-family:Bitter,serif}

h1{
  max-width:14ch;
  margin:.5rem 0 0;
  color:var(--ink);
  font-size:clamp(3rem,7vw,6rem);
  line-height:.98;
}

main{
  display:grid;
  grid-template-columns:minmax(0,1fr) 22rem;
  gap:4rem;
  max-width:80rem;
  margin:auto;
  padding:5rem 2rem 7rem;
}

article{
  font-size:1.04rem;
  line-height:1.85;
}

article h2{
  color:var(--green);
  font-size:2.2rem;
}

.scope-builder{
  align-self:start;
  position:sticky;
  top:2rem;
  padding:1.4rem;
  border:1px solid var(--line);
  border-radius:1.2rem;
  background:white;
}

.scope-builder h2{
  margin-top:0;
  color:var(--blue);
}

.scope-builder label{
  display:flex;
  gap:.7rem;
  margin:1rem 0;
  line-height:1.4;
}

pre{
  padding:1rem;
  overflow:auto;
  color:#d9eaff;
  background:#142238;
  line-height:1.6;
}

@media(max-width:800px){
  main{grid-template-columns:1fr}
  .scope-builder{position:static}
}