@font-face {
  font-family: "Fira Sans Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/fira-sans-condensed-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Fira Sans Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/fira-sans-condensed-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Fira Sans Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/fira-sans-condensed-800-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/fira-sans-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/fira-sans-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/fira-sans-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/fira-sans-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Fira Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/fira-mono-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Fira Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/fira-mono-500-normal.woff2") format("woff2");
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:root {
  font-size: clamp(16px, 1vw + 8px, 20px);
  --font-sans: "Fira Sans", system-ui, sans-serif;
  --font-condensed: "Fira Sans Condensed", system-ui, sans-serif;
  --font-mono: "Fira Mono", ui-monospace, monospace;
  --font-size-mono-label: .75rem;
  --font-size-mono: .875rem;
}

body { 
  font-family: var(--font-sans); 
  font-size: 1rem;
}

h1,
h2,
h3 {
  font-family: var(--font-condensed);
  letter-spacing: -.015em;
}

h1 { font-size: clamp(2.75rem, 5vw, 3.5rem); line-height: 1.0em; }
h2 { font-size: clamp(2rem, 3.5vw, 2.6rem); line-height: 1.0em; }
h3 { font-size: 1.35rem; }

sup, sub { line-height: 0; }
sup { vertical-align: super; font-size: 0.8rem; }
sup :is(a, a:hover) {
    color: inherit;
    text-decoration: none;
    box-shadow: none;
}

main > article {
  display: block;
  /* gap: 24px; */
}

main > article :first-child { margin-top: 0; }
main > article :last-child { margin-bottom: 0; }
main > article p { 
  line-height: 1.5rem;
  margin-bottom: var(--gutter-1x);
}
main > article a {
  color: var(--color-ink);
  font-weight: 500;
  text-underline-offset: 3px;
}

main > article :is(h2, h3) { margin: var(--gutter-3x) 0 var(--gutter-2x); }
main > article :is(ul, ol) {
  display: grid;
  gap: 10px;
  padding-left: 1.25em;
}

main > article blockquote {
  display: grid;
  gap: 12px;
  margin: var(--gutter-2x) 0;
  padding: var(--gutter-3x);
  border-left: 16px solid color-mix(in srgb, var(--color-ink) 50%, transparent);
  background: var(--color-smoke);
}

main > article :is(code, pre) { font-family: var(--font-mono); }
main > article code { font-size: .9em; }

main > article pre {
  overflow-x: auto;
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--color-ink);
  color: #d3d7e0;
  font-size: .9375rem;
  line-height: 2;
}

main > article hr {
  width: 100%;
  margin-top: 16px;
  border: 0;
  border-top: 1px solid var(--color-line);
}

.eyebrow { 
  font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; 
  font-weight: 500; 
  font-size: .72rem;
  line-height: 1.3;
}

[data-hyper-mention] { text-decoration: none; }