*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-sans);
  background: radial-gradient(1200px 600px at 20% 10%, rgba(22,242,208,0.10), transparent 60%),
              radial-gradient(900px 500px at 90% 0%, rgba(46,199,255,0.10), transparent 55%),
              radial-gradient(900px 540px at 50% 100%, rgba(244,198,122,0.08), transparent 60%),
              var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: var(--body);
  text-rendering: optimizeLegibility;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: none; }

.container{
  width: min(var(--container), calc(100% - 2*var(--s-5)));
  margin-inline: auto;
}

h1,h2,h3{
  margin: 0 0 var(--s-3);
  letter-spacing: -0.04em;
  font-family: var(--font-display);
  font-weight: 700;
}
h1{ font-size: var(--h1); line-height: 1.06; max-width: 12ch; }
h2{ font-size: var(--h2); line-height: 1.02; max-width: 16ch; }
h3{ font-size: var(--h3); line-height: 1.15; }

p{
  margin: 0 0 var(--s-4); color: var(--muted);
  hyphens: auto;;
}
strong{ color: var(--text); font-weight: 650; }

main p,
main li{
  max-width: 66ch;
}

.sr-only{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.skip-link{
  position: absolute; left: -999px; top: var(--s-4);
  background: var(--accent); color: #00110D;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  z-index: 9999;
}
.skip-link:focus{ left: var(--s-5); }

.section{ padding: var(--s-9) 0; }
.section--tight{ padding: var(--s-8) 0; }

::selection{
  background: rgba(22,242,208,0.32);
  color: #fff;
}