/* ==========================================================================
Typography tokens
Fonts as chosen in Figma:
Display / headings / nav → Open Sans Condensed (Bold 700, UPPERCASE)
Body / links / meta → Source Serif Pro (Regular 400 / SemiBold 600)
Loaded from Google Fonts in the page :
Open Sans Condensed ships only Light(300) + Bold(700); we use 700 only.
DEVIATIONS from Figma (fidelity: "refine as I build"):
• Body line-height relaxed from 34/16 (2.13) to 1.7 — 2.13 is unusually
loose for long case-study reading. Airy original kept as --pf-lh-body-airy.
• Added h2/h3/small steps — Figma only defined 54, 46, 18, 16, 14.
• Uppercase overline/label given positive tracking for caps legibility.
========================================================================== */
:root {
/* --- Families (with graceful fallbacks) --- */
--pf-font-display: "Open Sans Condensed", "Arial Narrow", "Helvetica Neue",
system-ui, sans-serif;
--pf-font-body: "Source Serif Pro", "Source Serif 4", Georgia,
"Times New Roman", serif;
/* --- Weights --- */
--pf-weight-body: 400;
--pf-weight-strong: 600;
--pf-weight-display: 700;
/* --- Type scale (fluid; rem-based, 1rem = 16px) --- */
--pf-text-display: clamp(2.5rem, 1.79rem + 3.14vw, 3.375rem); /* 40 → 54 */
--pf-text-h1: clamp(2rem, 1.56rem + 1.96vw, 2.875rem); /* 32 → 46 */
--pf-text-h2: clamp(1.5rem, 1.28rem + 0.98vw, 2rem); /* 24 → 32 */
--pf-text-h3: 1.25rem; /* 20 */
--pf-text-label: 1.125rem; /* 18 nav */
--pf-text-body: 1rem; /* 16 */
--pf-text-small: 0.875rem; /* 14 meta */
/* --- Line heights --- */
--pf-lh-display: 1.02; /* Figma 1.0; nudged for multi-line safety */
--pf-lh-heading: 1.05;
--pf-lh-body: 1.7; /* refined editorial (Figma was 2.13) */
--pf-lh-body-airy: 2.0; /* opt-in loose leading, closer to Figma */
--pf-lh-tight: 1.2;
/* --- Letter spacing --- */
--pf-tracking-display: -0.02em; /* condensed bold caps read tighter */
--pf-tracking-label: -0.01em;
--pf-tracking-caps: 0.08em; /* small uppercase overline/meta */
}
/* --------------------------------------------------------------------------
Base element styling + utility type classes.
Headings/labels use the condensed display face in UPPERCASE.
Body copy uses the serif.
-------------------------------------------------------------------------- */
.pf-display,
.pf-h1,
.pf-h2,
.pf-h3 {
font-family: var(--pf-font-display);
font-weight: var(--pf-weight-display);
text-transform: uppercase;
letter-spacing: var(--pf-tracking-display);
color: var(--pf-ink);
}
.pf-display {
font-size: var(--pf-text-display);
line-height: var(--pf-lh-display);
}
.pf-h1 {
font-size: var(--pf-text-h1);
line-height: var(--pf-lh-display);
}
.pf-h2 {
font-size: var(--pf-text-h2);
line-height: var(--pf-lh-heading);
}
.pf-h3 {
font-size: var(--pf-text-h3);
line-height: var(--pf-lh-heading);
}
/* Body copy */
.pf-body {
font-family: var(--pf-font-body);
font-weight: var(--pf-weight-body);
font-size: var(--pf-text-body);
line-height: var(--pf-lh-body);
color: var(--pf-ink);
}
.pf-body--airy {
line-height: var(--pf-lh-body-airy);
}
.pf-lead {
font-family: var(--pf-font-body);
font-size: var(--pf-text-body);
line-height: var(--pf-lh-body-airy);
color: var(--pf-ink);
}
/* Small uppercase label — the "overline" used for tags & captions */
.pf-overline {
font-family: var(--pf-font-body);
font-weight: var(--pf-weight-body);
font-size: var(--pf-text-small);
line-height: var(--pf-lh-tight);
text-transform: uppercase;
letter-spacing: var(--pf-tracking-caps);
color: var(--pf-ink-secondary);
}
/* Meta line under a heading (role / date) — serif, secondary */
.pf-meta {
font-family: var(--pf-font-body);
font-size: var(--pf-text-body);
line-height: var(--pf-lh-tight);
color: var(--pf-ink-secondary);
}