/* ============================================================
   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.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600&family=Source+Sans+3:wght@400;500;600;700;800&family=Source+Code+Pro:wght@500;600;700&display=swap');

:root{
  --font-display:'Playfair Display', Georgia, serif;
  --font-serif:'Playfair Display', Georgia, serif;
  --font-body:'Source Sans 3', Arial, sans-serif;
  --font-mono:'Source Code Pro', 'Courier New', monospace;
}

/* Playfair carries weight at 600 (Vina is a 400-only poster face) */
.hero-title,.work-title,.process-title,.system-line,.see-all,
.menu-nav a,.brand,.loader-mark,.about-watermark{font-weight:600;}

/* Playfair runs much wider than condensed Vina: rein the display sizes in */
.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);}
}