/* ═══════════════════════════════════════════════════════════════════════════ tandoco · shared typography system ─────────────────────────────────────────────────────────────────────────── Source of truth for fonts, modular scale, line-heights, and a small set of utility classes used across the site. Link it from every HTML page: Pages can use the CSS variables directly OR adopt the .h1/.h2/.h3/.body utility classes. Existing inline font sizes are not overridden — this file only sets variables and a couple of conservative resets. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* ── FONT FAMILIES ─────────────────────────────────────────────────────── Three roles, no more (per typography best practice — 1-3 fonts max): --tc-sans primary UI / body Plus Jakarta Sans --tc-editorial italic accent / quotes Newsreader (italic only) --tc-display brand wordmark "tandoco" Young Serif Pages should still load these fonts from Google Fonts in their . */ --tc-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --tc-editorial: 'Newsreader', Georgia, 'Times New Roman', serif; --tc-display: 'Young Serif', Georgia, serif; /* ── MODULAR SCALE (√φ ≈ 1.272) ────────────────────────────────────────── Each fluid size uses the canonical fluid-typography formula: MIN + (MAX-MIN) × (100vw - MIN_VW) / (MAX_VW - MIN_VW) anchored to MIN_VW=320px (smallest phone) and MAX_VW=1920px (large desktop), wrapped in clamp() to lock both endpoints. Linear interpolation between the two — no breakpoints needed. */ --tc-xs: 12.5px; --tc-sm: 14px; --tc-base: 16px; --tc-md: clamp(15px, calc(15px + 2*(100vw - 320px)/1600), 17px); /* lede */ --tc-lg: clamp(18px, calc(18px + 2*(100vw - 320px)/1600), 20px); /* h5 */ --tc-xl: clamp(22px, calc(22px + 4*(100vw - 320px)/1600), 26px); /* h4 */ --tc-2xl: clamp(26px, calc(26px + 7*(100vw - 320px)/1600), 33px); /* h3 */ --tc-3xl: clamp(32px, calc(32px + 10*(100vw - 320px)/1600), 42px); /* h2 */ --tc-4xl: clamp(42px, calc(42px + 22*(100vw - 320px)/1600), 64px); /* big h1 */ --tc-hero: clamp(40px, calc(40px + 44*(100vw - 320px)/1600), 84px); /* hero */ /* ── LINE-HEIGHTS ───────────────────────────────────────────────────────── Per the typography rule: ~150% for paragraph text, 110-130% for headings. */ --tc-lh-body: 1.55; --tc-lh-lede: 1.5; --tc-lh-h3: 1.25; --tc-lh-h2: 1.15; --tc-lh-h1: 1.05; /* ── LETTER-SPACING ─────────────────────────────────────────────────────── Big text → tighter; tiny uppercase eyebrows → looser. */ --tc-tracking-hero: -0.034em; --tc-tracking-h1: -0.024em; --tc-tracking-h2: -0.020em; --tc-tracking-h3: -0.014em; --tc-tracking-body: 0em; --tc-tracking-eye: 0.20em; } /* ── UTILITY CLASSES (opt-in) ───────────────────────────────────────────── Pages can adopt these instead of writing per-element font rules. Every class only sets typography — no margin / color / background — so it composes safely with existing layouts. */ .tc-sans { font-family: var(--tc-sans); } .tc-editorial { font-family: var(--tc-editorial); font-style: italic; } .tc-display { font-family: var(--tc-display); font-weight: 400; } /* The brand wordmark — use everywhere "tandoco" appears in headlines / body. */ .tc-wm { font-family: var(--tc-display); font-weight: 400; font-style: normal; letter-spacing: -0.018em; } /* Hierarchy via SIZE first, weight second. Hero / H1 are already huge — weight 800 not 900. H2 = 700. H3 = bold-ish. Subheadings where size doesn't differentiate get weight 800. */ .tc-hero { font-family: var(--tc-sans); font-weight: 800; font-size: var(--tc-hero); line-height: var(--tc-lh-h1); letter-spacing: var(--tc-tracking-hero); text-transform: lowercase; } .tc-h1 { font-family: var(--tc-sans); font-weight: 700; font-size: var(--tc-4xl); line-height: var(--tc-lh-h1); letter-spacing: var(--tc-tracking-h1); text-transform: lowercase; } .tc-h2 { font-family: var(--tc-sans); font-weight: 700; font-size: var(--tc-3xl); line-height: var(--tc-lh-h2); letter-spacing: var(--tc-tracking-h2); text-transform: lowercase; } .tc-h3 { font-family: var(--tc-sans); font-weight: 700; font-size: var(--tc-2xl); line-height: var(--tc-lh-h3); letter-spacing: var(--tc-tracking-h3); text-transform: lowercase; } .tc-h4 { font-family: var(--tc-sans); font-weight: 800; font-size: var(--tc-lg); line-height: var(--tc-lh-h3); letter-spacing: -0.012em; } .tc-eyebrow { font-family: var(--tc-sans); font-size: 11px; font-weight: 800; letter-spacing: var(--tc-tracking-eye); text-transform: uppercase; } .tc-lede { font-family: var(--tc-sans); font-size: var(--tc-md); line-height: var(--tc-lh-lede); font-weight: 500; } .tc-body { font-family: var(--tc-sans); font-size: var(--tc-base); line-height: var(--tc-lh-body); font-weight: 500; } .tc-small { font-family: var(--tc-sans); font-size: var(--tc-sm); line-height: var(--tc-lh-body); font-weight: 500; } /* Headline em accent — italicized editorial word in serif. Pages that already style their own .headline em can override this. */ .tc-em { font-family: var(--tc-editorial); font-style: italic; font-weight: 500; letter-spacing: -0.005em; } @media (prefers-reduced-motion: reduce) { /* fluid sizes still scale on resize but never animate per se — no rule needed. Block included for symmetry with other shared sheets. */ }