html{ scroll-behavior:smooth; }

.skip-link{
  position:absolute;
  top:-100px;
  left:12px;
  z-index:1000;
  background:#111;
  color:#fff;
  padding:12px 20px;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
  transition:top .2s ease;
}

.skip-link:focus{
  top:12px;
}

body{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--color-text);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
}

img{
  display:block;
  max-width:100%;
  height:auto;
}

.section{
  padding: var(--space-11) 20px;
}

.container{
  max-width: var(--container);
  margin:auto;
}

.container.narrow{
  max-width: var(--container-narrow);
}

h1,h2,h3,h4{
  margin:0 0 16px;
  color:var(--color-text);
  line-height:var(--lh-tight);
}

h2{
  font-size: clamp(26px, 3vw, 38px);
}

p{
  margin:0 0 18px;
  color:var(--color-text-soft);
}

@media (max-width:768px){
  .section{ padding: 72px 20px; }
}