/* Shared website typography. Add these semantic classes only where the common
   editorial hierarchy is required, so navigation and compact card copy remain
   page-specific. */
:root {
    --site-heading-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --site-heading-size: 42px;
    --site-copy-size: 20px;
    --site-copy-color: #000;
}

.site-title.site-title {
    margin-bottom: 20px;
    color: #1b1712;
    font-family: var(--site-heading-font);
    font-size: var(--site-heading-size);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.25;
}

.site-copy.site-copy,
.site-copy.site-copy p {
    color: var(--site-copy-color);
    font-family: var(--site-heading-font);
    font-size: var(--site-copy-size);
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.9;
}

.site-copy.site-copy p:last-child {
    margin-bottom: 0;
}

.site-title--light.site-title--light {
    color: #fff;
}

.site-copy--light.site-copy--light,
.site-copy--light.site-copy--light p {
    color: rgba(255, 255, 255, .76);
}

@media (max-width: 640px) {
    :root {
        --site-heading-size: 30px;
        --site-copy-size: 16px;
    }

    .site-title.site-title {
        font-size: var(--site-heading-size) !important;
    }

    .site-copy.site-copy,
    .site-copy.site-copy p {
        font-size: var(--site-copy-size) !important;
        line-height: 1.9 !important;
    }
}