/* ============================================================================= typography.css — single source of truth for fonts & text sizes site-wide. Load this LAST (after bootstrap_theme/bootstrap.css, blocks.css, style.css) on every page so it wins the cascade. All text levels — display titles, headings (h1–h6), subtitles/lead, body, small, and the reusable component levels below — are defined here ONCE via custom properties. Change a value here and it updates everywhere; never set font-family or font-size inline in the HTML again. Why fluid clamp(): one rule scales smoothly from phone to desktop, so we get consistent proportions without scattering @media breakpoints across pages. ========================================================================== */ :root { /* ---- Font family (single source of truth) ------------------------------- Bootstrap applies var(--bs-font-sans-serif) to , buttons and form controls. Redefining it here makes Raleway the site font EVERYWHERE (headings inherit it), so no page needs an inline font-family on . */ --bs-font-sans-serif: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-family-base: var(--bs-font-sans-serif); /* ---- Type scale (fluid: min, preferred, max) ---------------------------- Anchored to Bootstrap's familiar sizes at the large end so existing layouts keep their proportions, but defined once and reused below. */ --fs-display-1: clamp(2.75rem, 1.55rem + 5vw, 5rem); /* 404 big "404" */ --fs-display-2: clamp(2.5rem, 1.6rem + 4vw, 4.5rem); --fs-display-3: clamp(2.25rem, 1.5rem + 3.4vw, 4rem); --fs-display-4: clamp(2.25rem, 1.55rem + 3vw, 3.5rem); /* hero / page title */ --fs-display-5: clamp(2rem, 1.5rem + 2.2vw, 3rem); /* section / sub-hero*/ --fs-h1: clamp(1.9rem, 1.45rem + 1.7vw, 2.5rem); --fs-h2: clamp(1.6rem, 1.3rem + 1.2vw, 2rem); --fs-h3: clamp(1.45rem, 1.25rem + 0.85vw, 1.75rem); --fs-h4: clamp(1.3rem, 1.18rem + 0.55vw, 1.5rem); --fs-h5: 1.25rem; --fs-h6: 1rem; --fs-lead: clamp(1.1rem, 1.02rem + 0.4vw, 1.25rem); /* intro / subtitle */ --fs-subject: clamp(1.05rem, 1rem + 0.25vw, 1.15rem); /* card list titles */ --fs-body: 1rem; /* default paragraph */ --fs-small: 0.875rem; /* captions / meta */ /* ---- Line heights -------------------------------------------------------- */ --lh-tight: 1.15; /* large display / headings */ --lh-heading: 1.25; /* smaller headings */ --lh-body: 1.6; /* paragraph copy */ /* ---- Weights (must match the weights loaded from Google Fonts) ----------- */ --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; } /* ---- Base ---------------------------------------------------------------- */ body { font-family: var(--font-family-base); font-size: var(--fs-body); line-height: var(--lh-body); } /* Keep buttons / form controls / labels on the same font as the page. */ button, input, select, optgroup, textarea, .btn, .form-control, .form-label { font-family: var(--font-family-base); } /* ---- Headings (tag + Bootstrap .h* utility kept in lockstep) ------------- Bootstrap's defaults aren't !important, so loading later wins. We size by the VISUAL level (the .h* class wins over the tag when both are present), which is how this site is authored, e.g.

renders as h1. / h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); } h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); } h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); } h4, .h4 { font-size: var(--fs-h4); line-height: var(--lh-heading); } h5, .h5 { font-size: var(--fs-h5); line-height: var(--lh-heading); } h6, .h6 { font-size: var(--fs-h6); line-height: var(--lh-heading); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-family-base); } / ---- Display titles ------------------------------------------------------ / .display-1 { font-size: var(--fs-display-1); line-height: var(--lh-tight); } .display-2 { font-size: var(--fs-display-2); line-height: var(--lh-tight); } .display-3 { font-size: var(--fs-display-3); line-height: var(--lh-tight); } .display-4 { font-size: var(--fs-display-4); line-height: var(--lh-tight); } .display-5 { font-size: var(--fs-display-5); line-height: var(--lh-tight); } / ---- Lead / intro / subtitle --------------------------------------------- / .lead { font-size: var(--fs-lead); line-height: var(--lh-body); } / ---- Font-size utilities (.fs-1..6) kept identical to h1..h6 ------------- These carry !important in Bootstrap, so our overrides must too. Mapping the utilities to the same scale means .fs-3 (used for page subtitles) always matches an h3 — utilities and headings can never drift apart. / .fs-1 { font-size: var(--fs-h1) !important; } .fs-2 { font-size: var(--fs-h2) !important; } .fs-3 { font-size: var(--fs-h3) !important; } .fs-4 { font-size: var(--fs-h4) !important; } .fs-5 { font-size: var(--fs-h5) !important; } .fs-6 { font-size: var(--fs-h6) !important; } / ---- Small / caption text ------------------------------------------------ / .small, small { font-size: var(--fs-small); } / ---- Reusable component text levels ------------------------------------- Use these classes instead of inline font-size, so repeated UI text stays consistent and tunable from one place. / .subject-title { / subject / list-item titles inside cards */ font-size: var(--fs-subject); line-height: var(--lh-heading); }