@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap"); /* Sub-site typography scale & rhythm */ @layer theme { :root { /* Font families (Google Fonts loaded via in HTML) */ --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif; --font-heading: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* Sizes & rhythm */ --font-size-regular: clamp(1.00rem, 1.4vw, 1.05rem); --font-size-large: clamp(1.25rem, 2.0vw, 1.50rem); --font-size-x-large: clamp(2.25rem, 2.6vw, 3.00rem); --font-size-xx-large: clamp(3.25rem, 3.6vw, 4.50rem); /* Weights & leading */ --weight-regular: 400; --weight-medium: 600; --weight-bold: 800; --leading-tight: 1.06; --leading-body: 1.55; /* Optional heading tracking tweak (subtle) */ --heading-letterspacing: -0.01em; } /* Global type defaults */ html { font-kerning: normal; font-feature-settings: "kern","liga","clig","calt"; } body { font-family: var(--font-body); font-size: var(--font-size-regular); line-height: var(--leading-body); font-optical-sizing: auto; /* variable font nicety */ } /* Headings: Plus Jakarta Sans by default */ h1, h2, h3 { font-family: var(--font-heading); font-optical-sizing: auto; letter-spacing: var(--heading-letterspacing); margin: 0 0 var(--space-3); } h1 { font-size: var(--font-size-xx-large); line-height: var(--leading-tight); font-weight: var(--weight-bold); } h2 { font-size: var(--font-size-x-large); line-height: var(--leading-tight); font-weight: var(--weight-bold); } h3 { font-size: var(--font-size-large); font-weight: var(--weight-medium); } p { margin: 0 0 var(--space-3); } /* Existing tweak you had */ .media-object h2 { font-size: var(--font-size-large); } } /* ===== Optional switch: use Inter for headings too (if a sub-site needs it) Drop [data-heading=inter] on or a container to flip heading family. */ @layer theme { [data-heading="inter"] h1, [data-heading="inter"] h2, [data-heading="inter"] h3 { font-family: var(--font-body); } }