/* ========================================== FONTS / TYPOGRAPHY BASE (global) - Load this BEFORE site.css and index.css ========================================== */ /* Font family (Google Fonts loaded in ) */ :root{ --font-sans: "Titillium Web", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* Colors (assumes --fg / --bg exist in site.css;) */ --text: var(--fg); --text-dim: color-mix(in oklab, var(--fg) 72%, transparent); /* Weights */ --w-thin: 200; --w-regular: 300; --w-medium: 500; --w-semibold: 600; --w-bold: 700; /* Leading & letter-spacing */ --lh-body: 1.55; --lh-heading: 1.25; --ls-tight: 0; --ls-wide: 0.02em; /* Responsive sizes */ --fs-body: clamp(0.9rem, 0.25vw + 0.95rem, 1rem); --fs-h3: clamp(1rem, 0.9vw + 1rem, 1.1rem); --fs-h2: clamp(1rem, 1.0vw + 1.1rem, 1.2rem); --fs-h1: clamp(2.2rem, 2vw + 1.5rem, 3rem); /* Paragraph rhythm */ --space-para: 1em; } /* Base */ html { -webkit-text-size-adjust: 100%; } body{ color: var(--text); background: var(--bg); font-family: var(--font-sans); font-weight: var(--w-regular); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-tight); text-rendering: optimizeLegibility; } /* Paragraph rhythm */ p{ margin: 0 0 var(--space-para); } p + p { margin-top: var(--space-para); } /* Headings */ h1, h2, h3{ font-family: var(--font-sans); font-weight: var(--w-semibold); line-height: var(--lh-heading); letter-spacing: var(--ls-tight); margin: 0 0 0.5em; color: var(--text); } h1{ font-size: var(--fs-h1); text-transform: uppercase; } h2{ font-size: var(--fs-h2); } h3{ font-size: var(--fs-h3); } /* Lists */ ul, ol{ margin: 0 0 0.9em 1.25em; padding: 0; } li{ margin: 0.25em 0; } /* Links */ a{ color: inherit; text-decoration-thickness: .08em; text-underline-offset: .18em; } a:hover{ color: var(--text); text-decoration-color: currentColor; } /* Small/All caps utilities */ .smallcaps{ font-variant-caps: small-caps; letter-spacing: var(--ls-wide); } .allcaps { text-transform: uppercase; letter-spacing: var(--ls-wide); font-weight: var(--w-medium); } /* Emphasis, strong */ em{ font-style: italic; } strong{ font-weight: var(--w-semibold); } /* Blockquote */ blockquote{ margin: 0 0 1em; padding: .5em 1em; border-inline-start: 3px solid color-mix(in oklab, var(--fg, #0a0a0a) 20%, transparent); color: var(--text-dim); } /* Captions / meta */ figcaption, .caption, .meta{ font-size: .92em; line-height: 1.4; color: var(--text-dim); } /* Code-ish */ code, kbd, samp{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: .95em; } /* If main uses global justify, keep these left-aligned */ main h1, main h2, main h3, main figcaption, main .meta, main .caption, main ul, main ol { text-align: left; }