@font-face { font-family: 'Bricolage Grotesque'; src: url('fonts/bricolage-grotesque.ttf') format('truetype'); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('fonts/instrument-sans.ttf') format('truetype'); font-weight: 400 700; font-style: normal; font-display: swap; }
:root { --font-display: 'Bricolage Grotesque', sans-serif; --font-reading: 'Instrument Sans', sans-serif; --reading-width: 62ch; }
body { font-family: var(--font-reading); font-weight: 400; line-height: 1.6; font-synthesis: none; }
h1,h2,h3,h4,.project-title,.metric-value,.major-statement { font-family: var(--font-display); font-stretch: normal; font-optical-sizing: auto; }
h1,.major-statement { font-weight: 800; font-size: clamp(3rem, 7vw, 9rem); line-height: .95; letter-spacing: -.05em; }
h2,.section-heading { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem,4vw,4.5rem); line-height: 1.05; letter-spacing: -.035em; }
h3,.project-title { font-weight: 600; font-size: clamp(1.6rem,3vw,3rem); line-height: 1.1; letter-spacing: -.03em; }
h4 { font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.metric-value { font-weight: 800; font-size: clamp(2.8rem,5vw,5.5rem); line-height: 1; letter-spacing: -.045em; font-variant-numeric: lining-nums; }
p,.case-study-body { font-size: clamp(1rem,1.15vw,1.25rem); line-height: 1.6; max-width: var(--reading-width); }
nav,button,.cta { font-family: var(--font-reading); font-weight: 500; }
strong,b { font-weight: 600; }
figcaption,.caption { font-family: var(--font-reading); font-size: .875rem; line-height: 1.55; }
@media(max-width:700px) { h1,.major-statement { letter-spacing: -.035em; line-height: 1; } }