/** * Harshil Studio — shared standalone-essay typography * * Customize: edit the variables below, then run `npm run verify:essay-typography` * Docs: public/essays/_studio/TYPOGRAPHY.md */ :root { --studio-essay-font-body: 'Source Serif 4', 'Lora', Georgia, 'Times New Roman', serif; --studio-essay-font-ui: 'Inter', system-ui, -apple-system, sans-serif; --studio-essay-font-mono: 'Space Mono', ui-monospace, 'SF Mono', monospace; --studio-essay-size-base: 1.0625rem; --studio-essay-size-small: 0.9375rem; --studio-essay-line: 1.72; --studio-essay-line-tight: 1.35; --studio-essay-measure: 42rem; --studio-essay-gap-paragraph: 1.15em; --studio-essay-gap-heading-before: 2em; --studio-essay-gap-heading-after: 0.65em; --studio-essay-gap-list: 0.45em; --studio-essay-tracking-body: 0.01em; --studio-essay-tracking-caps: 0.12em; } /* Optional base layer — add class="essay-studio" on */ body.essay-studio { font-family: var(--studio-essay-font-body); font-size: var(--studio-essay-size-base); line-height: var(--studio-essay-line); letter-spacing: var(--studio-essay-tracking-body); font-feature-settings: 'kern' 1, 'liga' 1, 'onum' 1; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } body.essay-studio p, body.essay-studio .body, body.essay-studio p.body, body.essay-studio p.italic { margin: 0 0 var(--studio-essay-gap-paragraph); max-width: var(--studio-essay-measure); } body.essay-studio p:last-child { margin-bottom: 0; } body.essay-studio h1, body.essay-studio h2, body.essay-studio h3 { line-height: var(--studio-essay-line-tight); font-weight: 500; } body.essay-studio h2 { margin: var(--studio-essay-gap-heading-before) 0 var(--studio-essay-gap-heading-after); } body.essay-studio h3 { margin: 1.5em 0 var(--studio-essay-gap-heading-after); } body.essay-studio h2 + p, body.essay-studio h3 + p { margin-top: 0; } body.essay-studio ul, body.essay-studio ol { margin: 0 0 var(--studio-essay-gap-paragraph); padding-left: 1.35em; max-width: var(--studio-essay-measure); } body.essay-studio li { margin-bottom: var(--studio-essay-gap-list); } body.essay-studio li:last-child { margin-bottom: 0; } body.essay-studio .eyebrow, body.essay-studio .mono { font-family: var(--studio-essay-font-mono); letter-spacing: var(--studio-essay-tracking-caps); text-transform: uppercase; font-size: var(--studio-essay-size-small); }