html {
  scroll-behavior: smooth;
}

body,
button,
input,
select,
textarea {
  font-family: var(--hc-font-sans);
}

body.hc-site {
  margin: 0;
  background: var(--hc-white);
  color: var(--hc-text);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  color: var(--hc-text);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

h1 { font-size: clamp(2.7rem, 5.6vw, 5.25rem); }
h2 { font-size: clamp(2.1rem, 4vw, 3.8rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.9rem); }

p { margin-top: 0; margin-bottom: 1.25em; }

a {
  color: var(--hc-blue-700);
  text-underline-offset: 3px;
}

a:hover,
a:focus-visible {
  color: var(--hc-blue-600);
}

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

:focus-visible {
  outline: 3px solid var(--hc-lime-400);
  outline-offset: 3px;
}

::selection {
  background: var(--hc-blue-600);
  color: var(--hc-white);
}