h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
font-weight: 400;
} .display,
.h1,
.h2 {
font-family: var(--font-display);
font-weight: 400;
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
text-transform: uppercase;
color: var(--c-text);
text-wrap: balance;
}
.display {
font-size: var(--fs-hero);
}
.h1 {
font-size: var(--fs-h1);
}
.h2 {
font-size: var(--fs-h2);
}
.h2--sm {
font-size: var(--fs-h2-sm);
}
.h3 {
font-family: var(--font-ui);
font-size: var(--fs-h3);
font-weight: 700;
line-height: 1.14;
letter-spacing: -0.01em;
color: var(--c-text);
}
.h4 {
font-family: var(--font-ui);
font-size: var(--fs-h4);
font-weight: 700;
line-height: 1.2;
color: var(--c-text);
} .display .hl,
.h1 .hl,
.h2 .hl {
color: var(--c-accent);
}
.display .ln,
.h1 .ln,
.h2 .ln {
display: block;
} .eyebrow {
display: block;
margin: 0 0 18px;
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--c-text-3);
}
.mono {
font-family: var(--font-mono);
font-size: var(--fs-xs);
letter-spacing: 0.12em;
color: var(--c-text-3);
} .lead {
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-lead);
line-height: var(--lh-body);
color: var(--c-text-2);
max-width: 46ch;
}
.body {
margin: 0;
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--c-text-2);
}
.body--sm {
font-size: var(--fs-sm);
line-height: 1.7;
} .hand {
font-family: var(--font-hand);
font-weight: 400;
font-size: clamp(18px, 1.5vw, 22px);
line-height: 1.35;
letter-spacing: 0.02em;
color: rgba(245, 245, 245, 0.76);
}
.hand--accent {
color: var(--c-accent-light);
}
.hand--violet {
color: #a97bff;
} html[lang|="uk"] .hand {
font-size: clamp(22px, 1.85vw, 27px);
} .surface-paper .display,
.surface-paper .h1,
.surface-paper .h2,
.surface-paper .h3,
.surface-paper .h4 {
color: var(--p-ink);
}
.surface-paper .eyebrow,
.surface-paper .mono {
color: var(--p-ink-3);
}
.surface-paper .lead,
.surface-paper .body {
color: var(--p-ink-2);
}
.surface-paper .display .hl,
.surface-paper .h1 .hl,
.surface-paper .h2 .hl {
color: var(--p-accent);
}
.surface-paper .hand {
color: var(--p-accent);
} @media (max-width: 900px) {}