/* ========================================================================= Ian Randolph — Text styles (the "text conventions") Named typographic patterns composed entirely from tokens.css. Each class encodes one rhetorical move from the brand voice. Apply them by intent in new sections instead of re-deriving font-size / weight / tracking by hand. Load order: tokens.css -> type.css -> styles.css. Additive: existing component selectors (.hero h1, .value h2, .eyebrow ...) are intentionally untouched. The "supersedes" note on each style maps it to the older selectors so that drift can be retired opportunistically later. ========================================================================= */ /* Shared serif rendering (optical sizing + Fraunces axes), mixed into every serif text style so headings render consistently. */ .t-display, .t-headline, .t-title, .t-statement, .t-quote, .t-pull, .t-stat { font-family: var(--serif); font-optical-sizing: auto; font-variation-settings: "opsz" 110, "SOFT" var(--fraunces-soft), "WONK" var(--fraunces-wonk); color: var(--ink); margin: 0; text-wrap: balance; overflow-wrap: break-word; /* never overflow the viewport during font swap */ } /* ---- Eyebrow — uppercase tracked section label ----------------------- Supersedes: .eyebrow, .alts-head, .cell-label */ .t-eyebrow { font-family: var(--sans); font-size: var(--size-meta); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; line-height: var(--leading-snug); color: var(--ink-muted); margin: 0; } /* ---- Display — the hero serif statement, the scroll-stopper ---------- Supersedes: .hero h1, .hero-headline, .insight.pov .statement .thesis */ .t-display { font-weight: var(--weight-display); font-size: var(--size-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); max-width: 16ch; } /* ---- Headline — large section head ----------------------------------- Supersedes: .value h2, .ask h2 */ .t-headline { font-weight: var(--weight-display); font-size: var(--size-headline); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); max-width: 18ch; } /* ---- Title — smaller section head ------------------------------------ Supersedes: .prose h2, .door h3 */ .t-title { font-weight: var(--weight-display); font-size: var(--size-title); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); } /* ---- Statement — the aphorism, the emotional centre ------------------ A quiet serif at headline scale. Wrap the key phrase in .t-hl for accent. Supersedes: .insight .statement */ .t-statement { font-weight: var(--weight-light); font-size: var(--size-headline); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); max-width: 22ch; } /* ---- Lead — sans deck / subhead -------------------------------------- Supersedes: .lead, .hero-subhead, .insight.pov .statement .rest */ .t-lead { font-family: var(--sans); font-size: var(--size-lead); font-weight: var(--weight-body); line-height: var(--leading-deck); color: var(--ink); margin: 0; max-width: 46ch; } .t-lead.is-muted { color: var(--ink-muted); } /* ---- Body — default reading copy ------------------------------------- Matches the /

default; use the class when you need it on a non-paragraph element. */ .t-body { font-family: var(--sans); font-size: var(--size-body); font-weight: var(--weight-body); line-height: var(--leading-body); color: var(--ink); margin: 0; max-width: var(--measure); } /* ---- Meta — small muted caption / credential line -------------------- Supersedes: .hero-kicker, .trust, .voice .cite, .footer-meta .copy */ .t-meta { font-family: var(--sans); font-size: var(--size-meta); font-weight: var(--weight-medium); line-height: var(--leading-snug); letter-spacing: var(--tracking-normal); color: var(--ink-muted); margin: 0; } /* ---- Quote — testimonial serif pull-quote ---------------------------- Aligned to the shipped testimonial-card / call-out taste (book weight, snug quote leading). Supersedes: .voice blockquote, .tcard-pull, .cred-quote-text */ .t-quote { font-weight: var(--weight-body); font-size: var(--size-lead); line-height: var(--leading-quote); letter-spacing: var(--tracking-tight); text-wrap: pretty; } /* ---- Pull — pull quote, accent serif --------------------------------- Supersedes: .prose .pull */ .t-pull { font-weight: var(--weight-light); font-size: var(--size-title); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--accent); max-width: 24ch; } /* ---- Stat — the big serif number ------------------------------------- Supersedes: .proof-facts .n */ .t-stat { font-weight: var(--weight-body); font-size: var(--size-headline); line-height: 1; letter-spacing: var(--tracking-display); } /* ---- Highlight — accent span helper ---------------------------------- Supersedes: .hl */ .t-hl { color: var(--accent); }