/* Agreed site typography. See typography.html for specimens and contextual variants.
* Important declarations in this named layer override legacy Bootstrap/site typography
* without changing layout or escalating selector specificity. All role selectors use
* :where(), so later roles and contextual variants intentionally win by source order.
* Sizes are rem-based (16px reference); headings are fluid above 768px, capped at
* the approved 1440px sizes. Supporting browsers round to whole reference pixels.
*/
@layer kp-typography {
:root {
--kp-type-serif: 'EB Garamond', serif;
--kp-type-sans: 'IBM Plex Sans', sans-serif;
--kp-type-hero-display-size: 3.1875rem; /* 51px mobile / 108px desktop */
--kp-type-page-title-size: 2.75rem; /* 44px mobile / 81px desktop */
--kp-type-feature-heading-size: 3rem; /* 48px mobile / 72px desktop */
--kp-type-section-heading-size: 2.25rem; /* 36px mobile / 50px desktop */
--kp-type-resource-title-size: 2rem; /* 32px mobile / 43px desktop */
--kp-type-card-title-size: 1.375rem; /* 22px mobile / 30px desktop */
--kp-type-subheading-size: 1.25rem; /* 20px mobile / 25px desktop */
--kp-type-body-lead-size: 1.125rem; /* 18px mobile / 18px desktop */
--kp-type-body-standard-size: 1rem; /* 16px mobile / 16px desktop */
--kp-type-caption-size: calc(var(--kp-type-body-standard-size) - 0.125rem); /* Body minus 2px at the 16px reference base. */
--kp-type-caption-color: #667086;
--kp-type-metadata-size: 0.875rem; /* 14px mobile / 14px desktop */
--kp-type-label-color: #527085;
--kp-type-label-color-dark: #9eb5c8;
--kp-type-label-size: 0.75rem; /* 12px mobile / 12px desktop */
--kp-type-ai-prompt-label-size: 0.875rem; /* 14px mobile / 14px desktop */
--kp-type-button-size: 0.875rem; /* 14px mobile / 14px desktop */
--kp-type-action-link-size: 0.875rem; /* 14px mobile / 14px desktop */
--kp-type-navigation-size: 0.875rem; /* 14px mobile / 14px desktop */
--kp-type-mobile-navigation-size: 1rem; /* 16px mobile / 16px desktop */
--kp-type-wordmark-size: 1.5rem; /* 24px mobile / 28px desktop */
}
@media (min-width: 768px) {
:root {
--kp-type-hero-display-size: clamp(3.1875rem, 7.50000000vw, 6.75rem);
--kp-type-page-title-size: clamp(2.75rem, 5.62500000vw, 5.0625rem);
--kp-type-feature-heading-size: clamp(3rem, 5.00000000vw, 4.5rem);
--kp-type-section-heading-size: clamp(2.25rem, 3.47222222vw, 3.125rem);
--kp-type-resource-title-size: clamp(2rem, 2.98611111vw, 2.6875rem);
--kp-type-card-title-size: clamp(1.375rem, 2.08333333vw, 1.875rem);
--kp-type-subheading-size: clamp(1.25rem, 1.73611111vw, 1.5625rem);
}
}
@media (min-width: 992px) {
:root { --kp-type-wordmark-size: 1.75rem; }
}
/* Body Standard */
:where(.kp-type-body-standard,
.kp-homepage,
.kp-site-page,
.kp-home-main p,
.kp-home-main li,
.kp-team-section .card p,
.container-body p,
.container-body li,
.kp-reading-layout p,
.kp-reading-layout li,
.team-profile p,
.kp-literature-page .card-body,
.kp-literature-book__preface,
.kp-literature-book__preface p,
.kp-footer-intro p,
.kp-footer-updates-copy p,
.kp-footer-ai-lede,
.kp-footer-ai-panel blockquote,
.kp-ai-prompt__panel blockquote) {
--kp-type-size: var(--kp-type-body-standard-size);
font-family: var(--kp-type-sans) !important;
font-size: var(--kp-type-size) !important;
font-weight: 400 !important;
line-height: 1.72 !important;
letter-spacing: 0em !important;
text-transform: none !important;
}
/* Body Lead */
:where(.kp-type-body-lead,
.page-heading-container > p,
.kp-home-hero__lede,
.kp-ai-page-hero .kp-footer-ai-lede) {
--kp-type-size: var(--kp-type-body-lead-size);
font-family: var(--kp-type-sans) !important;
font-size: var(--kp-type-size) !important;
font-weight: 400 !important;
line-height: 1.72 !important;
letter-spacing: 0em !important;
text-transform: none !important;
}
/* Page Title */
:where(.kp-type-page-title,
.page-heading-container h1,
.kp-ai-page-title) {
--kp-type-size: var(--kp-type-page-title-size);
font-family: var(--kp-type-serif) !important;
font-size: var(--kp-type-size) !important;
font-weight: 400 !important;
line-height: 1.14 !important;
letter-spacing: -0.025em !important;
text-transform: none !important;
}
/* Hero Display */
:where(.kp-type-hero-display,
.kp-home-hero h1) {
--kp-type-size: var(--kp-type-hero-display-size);
font-family: var(--kp-type-serif) !important;
font-size: var(--kp-type-size) !important;
font-weight: 400 !important;
line-height: 1.06 !important;
letter-spacing: -0.025em !important;
text-transform: none !important;
}
/* Section Heading */
:where(.kp-type-section-heading,
.kp-section-heading,
.kp-reading-layout h2,
.kp-literature-section-heading,
.kp-jobs-section-heading,
.kp-jobs-subscribe__copy h3,
.kp-footer-updates-copy h2) {
--kp-type-size: var(--kp-type-section-heading-size);
font-family: var(--kp-type-serif) !important;
font-size: var(--kp-type-size) !important;
font-weight: 400 !important;
line-height: 1.05 !important;
letter-spacing: -0.025em !important;
text-transform: none !important;
}
/* Feature Heading */
:where(.kp-type-feature-heading,
.kp-home-intro__copy h2,
.kp-ai-prompt__copy h2,
.kp-footer-ai h2) {
--kp-type-size: var(--kp-type-feature-heading-size);
font-family: var(--kp-type-serif) !important;
font-size: var(--kp-type-size) !important;
font-weight: 400 !important;
line-height: 1.05 !important;
letter-spacing: -0.025em !important;
text-transform: none !important;
}
/* Resource Title */
:where(.kp-type-resource-title,
.kp-theory-resource-card h3,
.kp-theory-resource-card__title) {
--kp-type-size: var(--kp-type-resource-title-size);
font-family: var(--kp-type-serif) !important;
font-size: var(--kp-type-size) !important;
font-weight: 400 !important;
line-height: 1.08 !important;
letter-spacing: -0.02em !important;
text-transform: none !important;
}
/* Card Title */
:where(.kp-type-card-title,
.kp-paper-card .card-body h3,
.kp-seminar-section__copy h3,
.kp-literature-page .card-title h5,
.kp-team-page .team-profile h3) {
--kp-type-size: var(--kp-type-card-title-size);
font-family: var(--kp-type-serif) !important;
font-size: var(--kp-type-size) !important;
font-weight: 500 !important;
line-height: 1.2 !important;
letter-spacing: 0em !important;
text-transform: none !important;
}
/* Subheading */
:where(.kp-type-subheading,
.kp-reading-layout h3) {
--kp-type-size: var(--kp-type-subheading-size);
font-family: var(--kp-type-sans) !important;
font-size: var(--kp-type-size) !important;
font-weight: 500 !important;
line-height: 1.3 !important;
letter-spacing: 0em !important;
text-transform: none !important;
}
/* Metadata */
:where(.kp-type-metadata,
.kp-paper-card .card-body > p:first-of-type,
.kp-paper-publication-row,
.kp-paper-publication,
.kp-seminar-section__meta,
.kp-literature-page .card-title p,
.kp-literature-book__metadata p,
.kp-literature-book__preface-note) {
--kp-type-size: var(--kp-type-metadata-size);
font-family: var(--kp-type-sans) !important;
font-size: var(--kp-type-size) !important;
font-weight: 400 !important;
line-height: 1.45 !important;
letter-spacing: 0em !important;
text-transform: none !important;
}
/* Label */
:where(.kp-type-label,
.kp-eyebrow,
.kp-page-eyebrow,
.kp-home-intro__eyebrow,
.kp-theory-resource-card__eyebrow,
.kp-ai-concept__eyebrow,
.kp-footer-label,
.kp-page-contents__label,
.kp-team-section .card .font-weight-bold,
.kp-team-page .team-profile .font-weight-bold,
#sidebar ul p,
.kp-footer-column h2) {
--kp-type-size: var(--kp-type-label-size);
font-family: var(--kp-type-sans) !important;
font-size: var(--kp-type-size) !important;
font-weight: 600 !important;
line-height: 1.4 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
}
/* AI Prompt Label */
:where(.kp-type-ai-prompt-label,
.kp-ai-prompt__label,
.kp-footer-ai-panel__toolbar p) {
--kp-type-size: var(--kp-type-ai-prompt-label-size);
font-family: var(--kp-type-sans) !important;
font-size: var(--kp-type-size) !important;
font-weight: 600 !important;
line-height: 1.4 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
}
/* Action Link */
:where(.kp-type-action-link,
.kp-team-all,
.kp-resource-link,
.kp-theory-resource-card__markdown,
.kp-overview-next__link,
.a-page-breadcrumb-dark,
.kp-footer-legal p,
.kp-footer-legal a) {
--kp-type-size: var(--kp-type-action-link-size);
font-family: var(--kp-type-sans) !important;
font-size: var(--kp-type-size) !important;
font-weight: 500 !important;
line-height: 1.5 !important;
letter-spacing: 0.035em !important;
text-transform: none !important;
}
/* Adjacent Markdown link: regular-weight variant of Action Link. */
:where(.kp-theory-resource-card__markdown) { font-weight: 400 !important; }
/* Desktop Navigation */
:where(.kp-type-navigation,
.kp-desktop-nav > a,
.kp-nav-dropdown summary,
.kp-desktop-nav .kp-nav-dropdown__link) {
--kp-type-size: var(--kp-type-navigation-size);
font-family: var(--kp-type-sans) !important;
font-size: var(--kp-type-size) !important;
font-weight: 400 !important;
line-height: 1.5 !important;
letter-spacing: 0.02em !important;
text-transform: none !important;
}
/* Mobile Navigation */
:where(.kp-type-mobile-navigation,
#sidebar ul li a) {
--kp-type-size: var(--kp-type-mobile-navigation-size);
font-family: var(--kp-type-sans) !important;
font-size: var(--kp-type-size) !important;
font-weight: 400 !important;
line-height: 1.5 !important;
letter-spacing: 0em !important;
text-transform: none !important;
}
/* Wordmark */
:where(.kp-type-wordmark,
.kp-topbar .navbar-brand,
#sidebar a.sidebar-header,
.kp-footer-wordmark) {
--kp-type-size: var(--kp-type-wordmark-size);
font-family: var(--kp-type-serif) !important;
font-size: var(--kp-type-size) !important;
font-weight: 400 !important;
line-height: 1 !important;
letter-spacing: 0em !important;
text-transform: none !important;
}
/* Button */
:where(.kp-type-button,
.kp-homepage .btn,
.kp-site-page .btn,
:is(.kp-contact-form, .kp-footer-form) .cog-button--submit,
.kp-ai-prompt__copy-button,
.kp-paper-abstract-toggle) {
--kp-type-size: var(--kp-type-button-size);
font-family: var(--kp-type-sans) !important;
font-size: var(--kp-type-size) !important;
font-weight: 500 !important;
line-height: 1.5 !important;
letter-spacing: 0.035em !important;
text-transform: none !important;
}
/* Nav Button: separate from general buttons; matches each navigation layout. */
:where(.kp-type-nav-button,
.kp-mobile-drawer__cta,
.kp-desktop-nav .kp-nav-contact) {
--kp-type-size: 0.875rem;
font-family: var(--kp-type-sans) !important;
font-size: var(--kp-type-size) !important;
font-weight: 400 !important;
line-height: 1.5 !important;
letter-spacing: 0.035em !important;
text-transform: none !important;
}
:where(.kp-mobile-drawer__cta) {
--kp-type-size: 1rem;
}
/* Round fluid headings as well as the approved endpoints. The rem step keeps
browser font-size preferences effective; older browsers retain fluid sizing. */
@supports (font-size: round(nearest, 1rem, 0.0625rem)) {
:where(.kp-type-page-title,
.page-heading-container h1,
.kp-ai-page-title,
.kp-type-hero-display,
.kp-home-hero h1,
.kp-type-section-heading,
.kp-section-heading,
.kp-reading-layout h2,
.kp-literature-section-heading,
.kp-jobs-section-heading,
.kp-jobs-subscribe__copy h3,
.kp-footer-updates-copy h2,
.kp-type-feature-heading,
.kp-home-intro__copy h2,
.kp-ai-prompt__copy h2,
.kp-footer-ai h2,
.kp-type-resource-title,
.kp-theory-resource-card h3,
.kp-theory-resource-card__title,
.kp-type-card-title,
.kp-paper-card .card-body h3,
.kp-seminar-section__copy h3,
.kp-literature-page .card-title h5,
.kp-team-page .team-profile h3,
.kp-type-subheading,
.kp-reading-layout h3,
.kp-type-wordmark,
.kp-topbar .navbar-brand,
#sidebar a.sidebar-header,
.kp-footer-wordmark) {
font-size: round(nearest, var(--kp-type-size), 0.0625rem) !important;
}
}
/* Inline text keeps the surrounding type; emphasis and icons remain intact. */
:where(.kp-reading-layout p a, .kp-reading-layout li a,
.team-profile p a, .kp-jobs-copy p a, .kp-literature-page .card-body p a) {
font-family: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
letter-spacing: inherit !important;
text-transform: none !important;
}
/* Sentence links use regular weight; navigation and standalone actions keep
their own typography. Nested strong/emphasis elements remain intact. */
:where(.kp-site-page, .kp-homepage) :where(p, li) a:not(:where(
.btn, .kp-resource-link, .kp-team-all, .kp-overview-next__link,
.a-page-breadcrumb-dark, .a-navigation-dark,
.kp-topbar a, #sidebar a, .kp-site-footer a
)) {
font-weight: 400 !important;
}
/* Compact roster names are the agreed sans-serif exception to Card Title. */
:where(.kp-team-section .card h3) {
font-family: var(--kp-type-sans) !important;
font-size: var(--kp-type-body-standard-size) !important;
font-weight: 500 !important;
line-height: 1.3 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
:where(#sidebar a.sidebar-header) { font-size: 1.5rem !important; }
:where(.kp-footer-wordmark) { font-size: 1.75rem !important; }
:where(.kp-footer-column a) {
font-family: var(--kp-type-sans) !important;
font-size: 0.875rem !important;
font-weight: 400 !important;
line-height: 1.72 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
:where(.kp-footer-legal p, .kp-footer-legal a) { font-weight: 400 !important; }
:where(.kp-footer-legal p, .kp-footer-legal a:not(:hover):not(:focus-visible)) {
color: #999999 !important;
}
/* Keep dark-surface headings/navigation and link interaction colors contextual. */
:where(.kp-home-main p, .kp-home-main li, .container-body p, .container-body li,
.kp-reading-layout p, .kp-reading-layout li, .team-profile p,
.kp-literature-page .card-body, .kp-ai-prompt__panel blockquote,
.kp-footer-ai-panel blockquote) { color: #4c526a !important; }
:where(.kp-section-heading, .kp-reading-layout h2, .kp-reading-layout h3,
.kp-literature-section-heading, .kp-jobs-section-heading,
.kp-theory-resource-card h3, .kp-theory-resource-card__title,
.kp-paper-card .card-body h3, .kp-seminar-section__copy h3,
.kp-literature-page .card-title h5, .kp-team-page .team-profile h3) {
color: #090e35 !important;
}
:where(.kp-paper-card .card-body > p:first-of-type,
.kp-paper-publication-row,
.kp-paper-publication,
.kp-seminar-section__meta,
.kp-literature-page .card-title p,
.kp-literature-book__metadata p,
.kp-literature-book__preface-note) { color: #667086 !important; }
:where(.kp-type-label, .kp-type-ai-prompt-label, .kp-eyebrow,
.kp-page-eyebrow,
.kp-home-intro__eyebrow,
.kp-theory-resource-card__eyebrow,
.kp-ai-concept__eyebrow,
.kp-footer-label,
.kp-page-contents__label,
.kp-team-section .card .font-weight-bold,
.kp-team-page .team-profile .font-weight-bold,
#sidebar ul p,
.kp-footer-column h2,
.kp-ai-prompt__label,
.kp-footer-ai-panel__toolbar p) { color: var(--kp-type-label-color) !important; }
:where(#sidebar ul p, .kp-footer-column h2) { color: var(--kp-type-label-color-dark) !important; }
:where(.kp-ai-prompt__copy > p:last-child) {
color: rgba(233, 245, 255, 0.76) !important;
}
:where(.kp-ai-concept__eyebrow, .kp-footer-ai-band--dark .kp-footer-label) {
color: var(--kp-type-label-color-dark) !important;
}
:where(.kp-home-hero .kp-eyebrow) { color: var(--kp-type-label-color-dark) !important; }
:where(.kp-team-all, .kp-resource-link,
.kp-theory-resource-card__markdown, .kp-overview-next__link):not(:hover):not(:focus-visible) {
color: #2a6c92 !important;
}
/* Caption: shared by image/video figures and explicitly tagged captions.
Keep this after body/context rules so nested paragraphs and spans agree. */
:where(.kp-type-caption, figcaption, .figcaption-inline,
:is(.kp-type-caption, figcaption, .figcaption-inline) :is(p, span)) {
--kp-type-size: var(--kp-type-caption-size);
font-family: var(--kp-type-sans) !important;
font-size: var(--kp-type-size) !important;
font-weight: 400 !important;
line-height: 1.65 !important;
letter-spacing: 0em !important;
text-transform: none !important;
color: var(--kp-type-caption-color) !important;
}
:where(:is(.kp-type-caption, figcaption, .figcaption-inline) a) {
font-family: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
letter-spacing: inherit !important;
text-transform: none !important;
}
}