/* ============================================================ EXPERIMENT: homepage in font package 4 Playfair Display (display + serif) + Source Sans 3 (body) + Source Code Pro (labels). Loaded AFTER styles.css; remove this link from index.html to restore the Vina/Archivo look. Fonts from Google CDN for the trial; self-host if adopted. ============================================================ */ /* Source fonts load via the , not @import (Clarity style capture). */ :root{ --font-display:'Source Serif 4', Georgia, serif; --font-serif:'Source Serif 4', Georgia, serif; --font-body:'Source Sans 3', Arial, sans-serif; --font-mono:'Source Code Pro', 'Courier New', monospace; } /* Source Serif 4 carries the display weight at 600 (a cleaner, more professional serif than Playfair; pairs with the Source Sans body + Source Code labels) */ .hero-title,.work-title,.process-title,.system-line,.see-all, .menu-nav a,.brand,.about-watermark{font-weight:600;} /* keep the display sizes reined in (Source Serif sits close to Playfair's width) */ .hero-title{font-size:clamp(42px, 7.4vw, 122px);letter-spacing:.01em;line-height:1.02;} .work-title,.process-title{font-size:clamp(32px, 3.6vw, 52px);} .see-all{font-size:clamp(42px, 6vw, 92px);} .menu-nav a{font-size:clamp(36px, 4.8vw, 62px);} .system-a .system-line{font-size:clamp(34px, 5.2vw, 86px);} .system-b .system-line{font-size:clamp(60px, 9vw, 150px);} .about-watermark{font-size:36vw;} .brand{font-size:32px;} .loader-mark{font-size:clamp(100px, 13vw, 190px);} .fill-text{font-size:clamp(36px, 7vw, 104px);letter-spacing:-.015em;} /* serif slots (hero sub, steps, about, prefooter) keep their sizes; Playfair sits a touch larger on the eye, so ease the biggest one */ .step-text{font-size:clamp(30px, 3.3vw, 48px);} @media (max-width: 900px){ .hero-title{font-size:clamp(40px, 11vw, 96px);} }