/* Shared type system for the portfolio (landing + case studies).
   One scale, rem based so it respects the reader's browser font size.
   Headings are fluid: they scale with the viewport between a phone and a 1440px desktop,
   then stop growing. Body copy never goes below 16px, labels never below 12px. */

:root{
  /* Families: Inter for everything; Caveat Brush for accent words in headings;
     Caveat for handwritten notes (sticky notes in the case studies). */
  --font-sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-accent:'Caveat Brush', 'Caveat', cursive;
  --font-hand:'Caveat', 'Caveat Brush', cursive;

  /* Weights: 400 body, 500 UI labels, 600 sub-headings, 700 headings */
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  /* Scale (min at 360px, max at 1440px) */
  --fs-display: clamp(2.5rem, 1.667rem + 3.704vw, 5rem);       /* 40 to 80  hero name */
  --fs-h1:      clamp(2rem, 1.5rem + 2.222vw, 3.5rem);      /* 32 to 56  page titles */
  --fs-h2:      clamp(1.75rem, 1.5rem + 1.111vw, 2.5rem);  /* 28 to 40  section titles */
  --fs-h3:      clamp(1.5rem, 1.333rem + .741vw, 2rem);      /* 24 to 32 */
  --fs-h4:      clamp(1.25rem, 1.083rem + .741vw, 1.75rem);   /* 20 to 28  card titles */
  --fs-h5:      clamp(1.125rem, 1rem + .556vw, 1.5rem);    /* 18 to 24 */
  --fs-stat:    clamp(2.25rem, 2rem + 1.111vw, 3rem);     /* 36 to 48  big numbers */
  --fs-lead:    clamp(1.125rem, 1rem + .556vw, 1.5rem);    /* 18 to 24  intro paragraphs */
  --fs-body-lg: clamp(1rem, .917rem + .37vw, 1.25rem);     /* 16 to 20  section descriptions */
  --fs-xl: 1.25rem;     /* 20  */
  --fs-lg: 1.125rem;    /* 18  sub-headings in cards */
  --fs-md: 1rem;        /* 16  body */
  --fs-sm: .875rem;     /* 14  UI text, captions */
  --fs-xs: .75rem;      /* 12  labels, eyebrows */
  --fs-note: 1.375rem;  /* 22  handwritten notes (Caveat runs small) */

  /* Line heights */
  --lh-tight: 1.1;   /* display, h1 */
  --lh-heading: 1.2; /* h2 to h5 */
  --lh-ui: 1.4;      /* buttons, labels, short lines */
  --lh-body: 1.6;    /* paragraphs */

  /* Tracking */
  --ls-display: -.025em;
  --ls-heading: -.02em;
  --ls-tight: -.01em;
  --ls-caps: .08em;  /* uppercase labels */
}

html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{font-family:var(--font-sans); font-size:var(--fs-md); line-height:var(--lh-body);
  font-weight:var(--fw-regular); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; font-feature-settings:"kern","liga","calt"}
h1,h2,h3,h4,h5,h6{line-height:var(--lh-heading); text-wrap:balance}
p,li,figcaption{text-wrap:pretty}