/* =============================================================
   base.css, reset, body, typography defaults.
   ============================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  scroll-padding-top: var(--s-7);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
}

/* Headings ----------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: var(--letter-tight);
  line-height: var(--lh-tight);
  margin: 0;
  color: var(--ink);
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h1); }
h3 { font-size: var(--t-h2); }
h4 { font-size: var(--t-h3); }

p { margin: 0; }

/* Links -------------------------------------------------------- */
a {
  color: inherit;
  text-decoration-color: var(--rule-2);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur) var(--ease);
}
a:hover { text-decoration-color: var(--ink); }

/* Focus styles ------------------------------------------------- */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}

/* Form base ---------------------------------------------------- */
button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
}

a, button, [role="button"], input[type="submit"], input[type="button"], label, summary {
  cursor: default;
}

/* Utility classes --------------------------------------------- */
.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (max-width: 720px) {
  .container { padding-inline: var(--gutter-sm); }
}

.lede {
  font-family: var(--font-sans);
  font-size: var(--t-lede);
  line-height: var(--lh-loose);
  color: var(--ink-2);
  max-width: 60ch;
}

.caption {
  font-size: var(--t-caption);
  color: var(--ink-3);
  letter-spacing: var(--letter-caps);
  text-transform: uppercase;
}

.mono { font-family: var(--font-mono); font-size: var(--t-mono); }

.smallcaps {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  letter-spacing: var(--letter-caps);
  text-transform: uppercase;
  color: var(--ink-2);
}

/* Italic accent word inside large headings (display variant) ----
   Use <em class="accent">italic</em> inside an .display heading. */
.display {
  font-family: var(--font-serif);
  font-size: var(--t-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--letter-tight);
}

.display .accent {
  font-style: italic;
  font-weight: 400;
  position: relative;
}

/* Highlight marker, the PDF's yellow-behind-text effect ------
   Solid block that wraps cleanly across line breaks. Covers the
   full x-height with a small breath above/below so descenders
   stay legible. */
.hl {
  background-image: linear-gradient(
    180deg,
    transparent 0 6%,
    var(--highlight) 6% 96%,
    transparent 96% 100%
  );
  padding: 0 .14em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* Visually hidden but accessible ------------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}