/* Tornado Rampage: MatchaHome headings + Open Sans body text.
   Upload the original MatchaHome.ttf into assets/fonts/.
   Open Sans is loaded by the shared header through Google Fonts. */
@font-face {
    font-family: "MatchaHome";
    src: url("../fonts/MatchaHome.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

:root {
    --display: "MatchaHome", Impact, Haettenschweiler, "Arial Narrow", sans-serif;
    --body: "Open Sans", Arial, Helvetica, sans-serif;
}

/* Cover every H1–H4, including component rules that previously used body fonts. */
h1, h2, h3, h4,
.platform-intro h2,
.mode-copy h3,
.video-empty-copy h3,
.developer-card h3,
.document-body h2,
.dialog-toolbar h2,
.lightbox-caption h2 {
    font-family: var(--display);
    font-weight: 400;
    font-synthesis: none;
    letter-spacing: 0;
    overflow-wrap: break-word;
}

h4 { margin: 0; line-height: 1.2; }
p { font-family: var(--body); }

/* The supplied display face is wider than Impact. Allow natural wrapping. */
.hero h1 { white-space: normal; line-height: 1.16; }
.discord-banner h2, .developer-card h3 { line-height: 1.2; }
.discord-banner > div, .developer-card > div { min-width: 0; }
.about-grid > *, .developers-grid > *, .section-heading > div { min-width: 0; }

/* Keep the monograms in the same display family without synthetic bold. */
.dev-monogram { font-weight: 400; font-synthesis: none; letter-spacing: 0; }

@media (max-width: 640px) {
    .hero h1 { font-size: clamp(28px, 8.5vw, 50px); }
}