/* ══════════════════════════════════════════════════════════════════════ TYPOGRAPHY SYSTEM — single source of truth for every page. Two families only: Jura (headings/display) + Montserrat (everything else). Weights are limited to 400 / 500 / 600 / 700. Load this LAST in every , after style.css and any page CSS, so the hierarchy below wins over legacy per-section sizing. ══════════════════════════════════════════════════════════════════════ */ :root { --font-heading: "Jura", sans-serif; --font-body: "Montserrat", sans-serif; /* Legacy aliases — older rules still reference these names. */ --font-head: var(--font-heading); --font-display: var(--font-heading); --font-main: var(--font-body); --font-mono: var(--font-body); /* Hierarchy. The min and max of every step are exactly the specified sizes. The fluid middle term is constrained by viewport HEIGHT as well as width — a wide but short screen (a 1512x982 laptop) would otherwise sit at the desktop maximum, which reads as oversized. Only genuinely large displays now reach the top of the scale; phones still clamp to the mobile size. */ --type-display: clamp(2.75rem, min(5vw, 6vh), 4.5rem); --type-h1: clamp(2.5rem, min(4.5vw, 5.4vh), 4rem); --type-h2: clamp(2rem, min(3.5vw, 4.2vh), 3rem); --type-h3: clamp(1.5rem, min(2.5vw, 3vh), 2rem); --type-h4: clamp(1.125rem, min(1.8vw, 2.2vh), 1.5rem); --type-body-lg: clamp(1.0625rem, min(1.5vw, 1.8vh), 1.25rem); --type-body: 1rem; --type-ui: 0.9375rem; --type-label: 0.75rem; --type-caption: 0.875rem; /* Measure */ --measure-hero: 900px; --measure-body: 680px; } /* ── Base ───────────────────────────────────────────────────────────── */ body { font-family: var(--font-body); font-size: var(--type-body); font-weight: 400; line-height: 1.7; letter-spacing: 0; } h1, h2, h3, h4, h5, h6, .display-heading, .type-display, .type-h1, .type-h2, .type-h3, .type-h4 { font-family: var(--font-heading); font-style: normal; text-wrap: balance; } /* ── Display — hero statement only ──────────────────────────────────── */ .display-heading, .type-display { font-size: var(--type-display); font-weight: 700; line-height: 1.08; letter-spacing: -0.04em; max-width: var(--measure-hero); } /* ── Headings ───────────────────────────────────────────────────────── */ h1, .type-h1 { font-size: var(--type-h1); font-weight: 700; line-height: 1.1; letter-spacing: -0.035em; } h2, .type-h2 { font-size: var(--type-h2); font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; } h3, .type-h3 { font-size: var(--type-h3); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; } h4, h5, h6, .type-h4 { font-size: var(--type-h4); font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; } /* ── Body ───────────────────────────────────────────────────────────── */ p { font-family: var(--font-body); font-size: var(--type-body); font-weight: 400; line-height: 1.7; letter-spacing: 0; max-width: var(--measure-body); } /* Paragraphs inside layout primitives keep their container's width. */ p.type-full, li p, td p, th p, figcaption p { max-width: none; } .type-body-lg, .lead { font-family: var(--font-body); font-size: var(--type-body-lg); font-weight: 400; line-height: 1.65; letter-spacing: -0.01em; max-width: var(--measure-hero); } /* ── UI: navigation, buttons, form controls ─────────────────────────── */ nav a, .nav-link, button, .btn, [role="button"], input, select, textarea, .type-ui { font-family: var(--font-body); font-size: var(--type-ui); font-weight: 500; line-height: 1; letter-spacing: -0.005em; text-transform: none; } input, select, textarea { line-height: 1.5; } /* ── Labels and eyebrows — the only sanctioned uppercase ────────────── */ .eyebrow, .label, .type-label { font-family: var(--font-body); font-size: var(--type-label); font-weight: 600; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; } /* ── Captions and metadata ──────────────────────────────────────────── */ figcaption, small, .caption, .meta, .type-caption { font-family: var(--font-body); font-size: var(--type-caption); font-weight: 400; line-height: 1.5; letter-spacing: 0; } /* ── Guardrails ─────────────────────────────────────────────────────── */ /* Nothing heavier than 700. */ [style*="font-weight:800"], [style*="font-weight: 800"], [style*="font-weight:900"], [style*="font-weight: 900"] { font-weight: 700 !important; } /* Italics are reserved for publication titles (). */ em, i, .italic { font-style: normal; } cite { font-style: italic; } /* No decorative treatments on text. */ h1, h2, h3, h4, h5, h6, p, .display-heading, .lead { text-shadow: none; -webkit-text-stroke: 0; }