/* ---------------------------------------------------------------
   ELEMENTS — bare HTML elements, no classes.
   Layer 2 of 4.
   --------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background-color: var(--paper);
  /* BACKGROUND: thin diagonal hairlines, very low opacity */
  background-image: repeating-linear-gradient(
    45deg,
    rgba(20, 22, 26, 0.038) 0 1px,
    transparent 1px 10px
  );
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: var(--lh-head);
  margin: 0 0 var(--s-4);
  letter-spacing: -0.005em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 var(--s-4); max-width: var(--measure); }

ul, ol { margin: 0 0 var(--s-4); padding-left: 1.25em; max-width: var(--measure); }
li { margin-bottom: var(--s-2); }
li:last-child { margin-bottom: 0; }

strong { font-weight: 600; }

/* LINKS: underline slides in from the left on hover */
a {
  color: var(--cobalt);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size var(--transition), color var(--transition);
}
a:hover,
a:focus-visible { background-size: 100% 1.5px; }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 2px;
}

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

table { border-collapse: collapse; width: 100%; }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--s-6) 0;
}

button { font: inherit; color: inherit; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--paper-tint);
  padding: 1px 5px;
  border-radius: var(--r-sm);
}

figure { margin: 0; }

figcaption {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  margin-top: var(--s-3);
  max-width: var(--measure);
}

dl { margin: 0; }

address { font-style: normal; }

::selection { background: var(--coral); color: var(--ink); }

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