/* ==========================================================================
   ELEMENTS — bare HTML element defaults, no classes
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; min-width: 0; }

html { scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--c-ink);
  margin: 0 0 var(--sp-4);
}

h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-md); }

p { margin: 0 0 var(--sp-4); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25em; }
li { margin-bottom: var(--sp-2); }

a {
  color: var(--c-blue);
  text-decoration: none;
  background-image: linear-gradient(var(--c-blue), var(--c-blue));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size var(--dur-base) var(--ease);
}
a:hover, a:focus-visible { background-size: 100% 2px; }
a:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; background-size: 0% 2px; }

nav a, .card a, footer a, .btn { background-image: none; }

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: var(--sp-3) var(--sp-4); }

button, input, select, textarea { font-family: inherit; font-size: inherit; }

fieldset { border: none; padding: 0; margin: 0; }

hr { border: none; border-top: 1px dashed var(--c-line-strong); margin: var(--sp-8) 0; }

::selection { background: var(--c-magenta-tint); color: var(--c-ink); }