/* 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; }

/* ---- Type roles ---- */
.display {
  font-family: var(--font-display); 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: var(--font-subtitle); }
.lead { font-family: var(--font-subtitle); 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; }
/* The plain elements of a text (0.37): headings, lists, quote and links, as the HTML editor writes them */
.prose h2:not([class]) { font: 400 28px/1.25 var(--font-subtitle); color: var(--primary); margin: 1.6em 0 .5em; }
.prose h3:not([class]) { font: 400 22px/1.3 var(--font-subtitle); color: var(--primary); margin: 1.4em 0 .4em; }
.prose h4:not([class]) { font: 400 15px/1.4 var(--font-label); letter-spacing: .08em; text-transform: lowercase; color: var(--muted-foreground); margin: 1.4em 0 .4em; }
.prose ul:not([class]), .prose ol:not([class]) { margin: 0 0 1em; padding-left: 1.3em; }
.prose ul:not([class]) { list-style: disc; }
.prose ol:not([class]) { list-style: decimal; }
.prose :is(ul, ol):not([class]) > li { margin: .25em 0; padding-left: .2em; }
.prose :is(ul, ol):not([class]) > li::marker { color: var(--muted-foreground); }
.prose blockquote:not([class]) { margin: 1.5em 0; padding-left: 1em; border-left: 2px solid var(--primary); font-style: italic; }
.prose a:not(.btn):not([class]) { color: var(--primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose > :first-child { margin-top: 0; }
/* Label: small caps with tracking, like \eyebrow in the LaTeX class */
.eyebrow {
  font: 400 14px/1.4 var(--font-label);
  letter-spacing: .1em; text-transform: lowercase;
  color: var(--muted-foreground);
}
.eyebrow.brand { color: var(--brand); }
.wordmark { font: 400 16px var(--font-label); letter-spacing: .14em; text-transform: lowercase; text-decoration: none; }