@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
--font-display:'Lato', -apple-system, sans-serif;
--font-body:'Manrope', -apple-system, sans-serif;
--font-mono:'IBM Plex Mono', 'SF Mono', monospace;

--size-display-1:clamp(3rem,2rem + 4vw,5.5rem);
--size-display-2:clamp(2.25rem,1.75rem + 2.5vw,3.75rem);
--size-h1:2.5rem;
--size-h2:1.875rem;
--size-h3:1.375rem;
--size-h4:1.125rem;
--size-body-lg:1.125rem;
--size-body:1rem;
--size-body-sm:.875rem;
--size-caption:.75rem;
--size-mono:.8125rem;

--lh-tight:1.05; /* @kind other */
--lh-snug:1.25; /* @kind other */
--lh-normal:1.55; /* @kind other */
--lh-loose:1.7; /* @kind other */

--ls-display:-0.02em; /* @kind other */
--ls-caps:0.16em; /* @kind other */
--ls-body:0; /* @kind other */
}

.font-display{font-family:var(--font-display);font-weight:700;letter-spacing:var(--ls-display);line-height:var(--lh-tight)}
.font-display-bold{font-family:var(--font-display);font-weight:900;letter-spacing:var(--ls-display);line-height:var(--lh-tight)}
.font-body{font-family:var(--font-body);letter-spacing:var(--ls-body);line-height:var(--lh-normal)}
.font-mono{font-family:var(--font-mono);letter-spacing:0.02em}
.eyebrow{font-family:var(--font-body);font-weight:700;font-size:var(--size-caption);letter-spacing:var(--ls-caps);text-transform:uppercase}