@font-face { font-family: "Playfair Display"; src: url('/assets/fonts/Playfair_Display/700.woff2') format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: Caveat; src: url('/assets/fonts/Caveat/700.woff2') format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: Rubik; src: url('/assets/fonts/Rubik/regular.woff2') format('woff2'); font-display: swap; } @font-face { font-family: Rubik; src: url('/assets/fonts/Rubik/700.woff2') format('woff2'); font-weight: 700; font-display: swap; } body { color: var(--color-text); font-family: var(--font-body); font-size: 16px; line-height: 1.625; } h1, h2, h3 { color: var(--color-primary); font-family: var(--font-heading); line-height: 1.15; text-wrap: balance; } .no-balance { text-wrap: auto; } h1 { font-size: clamp(2.5rem, 5vw, 3rem); line-height: 1.12; margin: 0 0 var(--space-md); } h2 { font-size: clamp(2rem, 4vw, 2.4rem); line-height: 1.25; } h3 { font-size: 1.5rem; } a { color: var(--color-primary); } .eyebrow { color: var(--color-secondary); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .lede, .hero-copy { color: var(--color-muted); font-size: 1.25rem; } .script-label { color: var(--color-accent-strong); font-family: var(--font-accent); font-size: 1.5rem; margin: 0 0 .5rem; } .prose :where(ul, ol) { margin-block: 0 1.5rem; padding-inline-start: 2.5rem; } .prose :where(ul, ol) :where(ul, ol) { margin-block: .25rem 0; } .prose li { line-height: 1.625; margin-block: 0; padding-inline-start: .15rem; } .prose li > p { margin-block: 0; } .prose ul > li::marker { color: var(--color-accent); } .prose ol > li::marker { color: var(--color-primary); } .blog-post-body :where(ul, ol) { padding-inline-start: 1.875rem; } .blog-post-body li { line-height: 1.5; margin-bottom: .25rem; }