/* ========================================================================== LumaSKIN Clinic - Typography Display: Instrument Serif (editorial). UI/body: Hanken Grotesk. Fonts are loaded via a single in each page . ========================================================================== */ body { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--luma-charcoal); background: var(--luma-cream); font-feature-settings: "ss01", "cv01"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ---- Headings: editorial serif, set large and quiet ---- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--font-weight-regular); line-height: 1.04; letter-spacing: -0.005em; color: var(--luma-charcoal); text-wrap: balance; } h1 { font-size: var(--text-hero); letter-spacing: -0.015em; } h2 { font-size: var(--text-h2); letter-spacing: -0.012em; } h3 { font-size: var(--text-h3); } h4 { font-size: var(--text-h4); font-family: var(--font-body); font-weight: var(--font-weight-semibold); letter-spacing: -0.01em; line-height: 1.2; } /* Body copy */ p { text-wrap: pretty; font-size: var(--text-body); color: var(--luma-mid); line-height: 1.7; } /* Tabular figures for any numeric / data context */ .stat__num, .plan__price, .pricerow__price, .calendar, .milestone__month, .stat__label { font-variant-numeric: tabular-nums; } strong, b { font-weight: var(--font-weight-semibold); color: var(--luma-charcoal); } a { color: var(--luma-gold-dark); text-decoration: none; } em, i { font-style: italic; } ::selection { background: var(--luma-gold-light); color: var(--luma-obsidian); }