/* Base element styles + layout primitives. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* Display type: Lay Grotesk Medium, tight tracking + leading, left-aligned,
   sentence case with periods. */
h1, .display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(44px, 6vw, 88px);
  line-height: 1.0;
  letter-spacing: -0.04em;
  text-align: left;
}

h2, .headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

p.lede {
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--ink-muted);
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--cobalt);
}

a { color: var(--cobalt); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--cobalt-hover); }

code, .mono { font-family: var(--font-mono); font-size: 0.9em; }

:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; border-radius: 4px; }

::selection { background: var(--cobalt-solid); color: #fff; }

/* Layout */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section { padding-top: var(--s7); padding-bottom: var(--s7); }
.section-tight { padding-top: var(--s6); padding-bottom: var(--s6); }

.on-dark { color: #fff; }
.on-dark h1, .on-dark h2, .on-dark h3 { color: #fff; }
.on-dark p.lede { color: var(--light-blue); }
.on-dark .eyebrow { color: var(--light-blue); }
.on-dark a { color: var(--light-blue); }

/* Announced to screen readers, invisible on screen. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }
.small { font-size: 14px; }
.tiny { font-size: 12px; }