/* Base styles (exportable, no build step) */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--c-ink);
  background:
    radial-gradient(circle at 84% -10%, rgba(196,130,10,.09), transparent 38%),
    radial-gradient(circle at 6% 18%, rgba(26,92,74,.08), transparent 42%),
    var(--c-bg);
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.62;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--c-emerald);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--c-navy)}

h1,h2,h3,h4{
  font-family:var(--font-display);
  line-height:1.08;
  letter-spacing:.01em;
  text-wrap:balance;
  margin:0 0 .7em;
  color:var(--c-navy);
}
p{margin:.2em 0 1em;max-width:72ch}
ul{margin:0;padding-left:1.1rem}

.container{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:18px;top:18px;width:auto;height:auto;padding:10px 12px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:10px;z-index:999}

.muted{color:var(--c-ink-soft)}
.tiny{font-size:var(--step--1)}

@media (max-width:640px){
  body{line-height:1.55}
}