/* ===== TYPOGRAPHY SYSTEM ===== * CLO-327: Typography System * Agent: FRAME * * Font Stack: * Headlines: Philosopher (Google Fonts — free) * Body: Nunito (Google Fonts — free) * Data: Handjet (Google Fonts — free, variable weight) * * Loading Strategy: * - Google Fonts loaded via in HTML * - font-display: swap (set in Google Fonts URL) * - Preconnect to fonts.googleapis.com + fonts.gstatic.com in all HTML * ===== */ /* ===== TYPOGRAPHY UTILITIES ===== */ /* Headline styles — editorial serif */ .type-display { font-family: 'Philosopher', Georgia, serif; font-size: var(--type-h1); font-weight: 300; line-height: var(--leading-tight); color: var(--color-ink); max-width: 18ch; } .type-heading { font-family: 'Philosopher', Georgia, serif; font-size: var(--type-h2); font-weight: 400; line-height: var(--leading-tight); color: var(--color-ink); } .type-subheading { font-family: 'Philosopher', Georgia, serif; font-size: var(--type-h3); font-weight: 400; line-height: var(--leading-tight); color: var(--color-ink); } /* Body styles — humanist sans */ .type-body { font-family: 'Nunito', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif; font-size: var(--type-body); font-weight: 400; line-height: var(--leading-body); color: var(--color-charcoal); } .type-body-strong { font-family: 'Nunito', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif; font-size: var(--type-body); font-weight: 500; line-height: var(--leading-body); color: var(--color-charcoal); } .type-caption { font-family: 'Nunito', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif; font-size: var(--type-caption); font-weight: 400; line-height: var(--leading-relaxed); color: var(--color-graphite); } /* Data styles — monospace */ .type-stat { font-family: 'Handjet', 'IBM Plex Mono', monospace; font-size: var(--type-stats); font-weight: 300; line-height: 1; color: var(--color-bronze); } .type-data { font-family: 'Handjet', 'IBM Plex Mono', monospace; font-size: var(--type-body); font-weight: 300; line-height: var(--leading-body); } .type-data-small { font-family: 'Handjet', 'IBM Plex Mono', monospace; font-size: var(--type-caption); font-weight: 300; line-height: var(--leading-body); color: var(--color-graphite); } /* ===== TYPOGRAPHY RULES (enforced) ===== */ /* Display headlines: max 7 words — enforced by design, not CSS */ /* Body: max 3 sentences per paragraph — enforced by content */ /* Max line length: 75ch — enforced by --measure token */ /* No drop caps */ p::first-letter { font-size: inherit; float: none; } /* No decorative letter-spacing on body */ p, .type-body, .type-caption { letter-spacing: normal; } /* No centered body copy — only center-stage headlines */ .center-stage p { text-align: left; margin-left: auto; margin-right: auto; } /* Proof figures: min 1.25x surrounding body, monospace */ .proof-figure { font-family: 'Handjet', 'IBM Plex Mono', monospace; font-size: calc(var(--type-body) * 1.25); font-weight: 300; color: var(--color-bronze); } /* Links — Copper default, no underline except hover */ a { color: var(--color-copper); text-decoration: none; transition: color 0.2s var(--ease-default); } a:hover { color: var(--color-bronze); text-decoration: underline; }