/* AI Leadership type: fonts and the editorial type roles. Shared by the app and the design page.
   Needs tokens.css for colors and the --font-* variables. */

@font-face { font-family: "Inter"; src: url(fonts/Inter-Regular.otf); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url(fonts/Inter-Medium.otf); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url(fonts/Inter-SemiBold.otf); font-weight: 600; font-display: swap; }
@font-face { font-family: "Latin Modern Roman"; src: url(fonts/lmroman10-regular.otf); font-weight: 400; font-display: swap; }
@font-face { font-family: "Latin Modern Roman"; src: url(fonts/lmroman10-italic.otf); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Latin Modern Roman"; src: url(fonts/lmroman10-bold.otf); font-weight: 700; font-display: swap; }
@font-face { font-family: "Latin Modern Roman"; src: url(fonts/lmroman10-bolditalic.otf); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Latin Modern Roman 12"; src: url(fonts/lmroman12-regular.otf); font-weight: 400; font-display: swap; }
@font-face { font-family: "Latin Modern Roman 12"; src: url(fonts/lmroman12-italic.otf); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Latin Modern Roman 17"; src: url(fonts/lmroman17-regular.otf); font-weight: 400; font-display: swap; }
@font-face { font-family: "Latin Modern Roman Caps"; src: url(fonts/lmromancaps10-regular.otf); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/JetBrainsMono-Regular.otf); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/JetBrainsMono-Medium.otf); font-weight: 500; font-display: swap; }

/* ---- Type roles ---- */
.display {
  font-family: "Latin Modern Roman 17", var(--font-serif); font-weight: 400;
  letter-spacing: -0.005em; line-height: 1.08; margin: 0;
}
.display-xl { font-size: clamp(48px, 7vw, 80px); }
.display-lg { font-size: clamp(36px, 4.5vw, 48px); }
.display-md { font-size: 32px; line-height: 1.15; }
.display-sm { font-size: 24px; line-height: 1.25; font-family: "Latin Modern Roman 12", var(--font-serif); }
.lead { font-family: "Latin Modern Roman 12", var(--font-serif); font-style: italic; font-size: 21px; line-height: 1.5; color: var(--muted-foreground); margin: 0; }
.prose { font-family: var(--font-serif); font-size: 19px; line-height: 1.65; hyphens: auto; }
.prose p { margin: 0 0 1em; }
/* Label: small caps with tracking, like \eyebrow in the LaTeX class */
.eyebrow {
  font: 400 14px/1.4 "Latin Modern Roman Caps", var(--font-serif);
  letter-spacing: .1em; text-transform: lowercase;
  color: var(--muted-foreground);
}
.eyebrow.brand { color: var(--brand); }
.wordmark { font: 400 16px "Latin Modern Roman Caps", var(--font-serif); letter-spacing: .14em; text-transform: lowercase; text-decoration: none; }