@font-face {
  font-family:Bricolage;
  src:url('assets/bricolage-grotesque.ttf') format('truetype');
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
}

@font-face {
  font-family:Space;
  src:url('assets/space-grotesk.ttf') format('truetype');
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
}

/* One scale for the studio, project pages and legal pages. */
:root {
  --body:Space,Arial,sans-serif;
  --display:Bricolage,Arial,sans-serif;
  --editorial:Georgia,serif;
  --type-small:.875rem;
  --type-control:.9375rem;
  --type-body:1rem;
  --type-lead:1.125rem;
  --type-card:clamp(1.375rem,1.2rem + .5vw,1.5rem);
  --type-title:clamp(2rem,1.6rem + 1.5vw,2.5rem);
  --type-subsection:clamp(2rem,1.4rem + 2.5vw,3.75rem);
  --type-section:clamp(2.5rem,1.6rem + 3.4vw,5rem);
  --type-page:clamp(2.5rem,1.8rem + 2.8vw,4.5rem);
  --type-project:clamp(3.25rem,2rem + 4.5vw,7rem);
  --type-hero:clamp(3.25rem,1.1rem + 7.5vw,9rem);
  --type-quote:clamp(1.875rem,1.3rem + 2.9vw,3.75rem);
  --type-brand:clamp(1.75rem,1.5rem + 1vw,2rem);
  --leading-body:1.6;
  --leading-label:1.5;
  --leading-heading:1.04;
  --tracking-label:.08em;
}

.section-label {
  font:500 var(--type-small)/var(--leading-label) var(--body);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--muted);
}

.meta {
  font:400 var(--type-small)/var(--leading-label) var(--body);
  letter-spacing:0;
}