*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  background:
    radial-gradient(1200px 800px at 10% 10%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 55%),
    radial-gradient(900px 700px at 90% 20%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%),
    var(--bg);
  color:var(--text);
  line-height:1.7;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

.container{width:var(--container);margin-inline:auto}
.page-pad{padding:2.2rem 0}
.muted{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.skip-link{
  position:absolute;left:10px;top:10px;
  padding:.6rem .8rem;
  border-radius:999px;
  background:var(--surface);
  border:1px solid var(--stroke);
  transform:translateY(-140%);
  transition:transform .2s ease;
  z-index:9999;
}
.skip-link:focus{transform:translateY(0)}

.page-head{margin-bottom:1.2rem}
.page-title{
  font-family:var(--font-title);
  font-weight:700;
  font-size:clamp(2rem, 3vw, 2.8rem);
  margin:0 0 .35rem;
}
.page-subtitle{margin:0;color:var(--muted);max-width:70ch}

.section{padding:2.1rem 0}
.section-alt{
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border-top:1px solid var(--stroke);
  border-bottom:1px solid var(--stroke);
}
.section-head{margin-bottom:1.1rem}
.section-title{
  font-family:var(--font-title);
  font-weight:700;
  font-size:clamp(1.6rem, 2.3vw, 2.3rem);
  margin:0 0 .25rem;
}
.section-subtitle{margin:0;color:var(--muted);max-width:70ch}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important;transition:none !important;animation:none !important}
}