/*
 * Cecil typography system
 *
 * A final, low-specificity typography layer inspired by high-quality editorial
 * web typography: native font matching, deliberate mixed-script spacing,
 * balanced headings, and readable body copy at every viewport.
 */

:root {
    --font-cecil-latin:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Text",
        "SF Pro Display",
        "Segoe UI Variable Text",
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif;
    --font-cecil-cjk:
        "SF Pro SC",
        "SF Pro Text",
        "SF Pro Display",
        "PingFang SC",
        "Hiragino Sans GB",
        "Microsoft YaHei UI",
        "Microsoft YaHei",
        "Noto Sans CJK SC",
        "Noto Sans SC",
        sans-serif;
    --font-cecil-display: var(--font-cecil-latin);
    --font-cecil-body: var(--font-cecil-latin);
}

html:lang(zh-CN) {
    --font-cecil-display: var(--font-cecil-cjk);
    --font-cecil-body: var(--font-cecil-cjk);
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-kerning: normal;
}

body,
button,
input,
select,
textarea {
    font-family: var(--font-cecil-body);
}

body {
    font-optical-sizing: auto;
    font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "calt" 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html:lang(zh-CN) body {
    line-break: strict;
    text-autospace: normal;
}

h1,
h2,
h3,
h4,
h5,
h6,
.title-main,
.title-sub,
.title-text {
    font-family: var(--font-cecil-display);
    text-wrap: balance;
}

p,
.domain,
.bookmark-tip,
.glow-card p {
    text-wrap: pretty;
    orphans: 2;
    widows: 2;
}

.hero-content .title-main {
    font-weight: 760 !important;
    letter-spacing: -0.025em !important;
    line-height: 0.98;
}

.hero-content .title-sub {
    font-weight: 680 !important;
    letter-spacing: -0.012em !important;
    line-height: 1.2;
}

html:lang(zh-CN) .hero-content .title-main,
html:lang(zh-CN) .hero-content .title-sub {
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

.hero-content .typed-text,
.hero-content .cursor {
    font-family: var(--font-cecil-body);
    font-weight: 520;
    letter-spacing: 0.045em;
}

html:lang(en) .hero-content .typed-text,
html:lang(en) .hero-content .cursor {
    letter-spacing: 0.025em;
}

.hero-content .domain,
.hero-content .bookmark-tip {
    line-height: 1.7;
}

.domain {
    overflow-wrap: normal;
    word-break: normal;
}

.domain a,
.typography-nowrap {
    white-space: nowrap;
}

.nav-profile-button__inner,
.nav-motion-cta__label,
.button-6__front,
.button-6__label,
.download h3,
.download-links a {
    font-family: var(--font-cecil-body);
}

.nav-profile-button__inner,
.nav-motion-cta__label,
.button-6__front,
.button-6__label {
    font-weight: 600;
}

.slogan {
    max-width: 56rem;
    margin-inline: auto;
}

.slogan .title-text {
    margin-inline: auto;
    font-weight: 680;
    line-height: 1.22;
    letter-spacing: -0.018em !important;
}

html:lang(zh-CN) .slogan .title-text {
    font-weight: 700;
    letter-spacing: 0 !important;
}

html:lang(en) .slogan .title-text {
    max-inline-size: 24ch;
}

.glow-card h5 {
    width: 100%;
    font-family: var(--font-cecil-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.35;
    text-wrap: balance;
}

.glow-card p {
    max-inline-size: 35ch;
    margin-inline: auto;
    font-family: var(--font-cecil-body);
    font-size: clamp(0.9375rem, 1.05vw, 1rem);
    font-weight: 400;
    line-height: 1.72;
    letter-spacing: 0;
}

html:lang(en) .glow-card p {
    line-height: 1.62;
}

.globe-kicker,
.globe-meta,
.globe-node-tag,
.globe-node-count,
.globe-node-card span {
    font-variant-numeric: tabular-nums;
}

@supports (hanging-punctuation: allow-end) {
    html:lang(zh-CN) p,
    html:lang(zh-CN) .title-text {
        hanging-punctuation: allow-end;
    }
}

@media (max-width: 900px) {
    .nav-profile-button__inner,
    .nav-motion-cta__label {
        font-size: 15px;
    }

    .hero-content .domain,
    .hero-content .bookmark-tip {
        font-size: clamp(15px, 3.7vw, 17px);
        line-height: 1.65;
    }

    .hero-content .buttons .button-6__front,
    .hero-content .buttons .button-6__label {
        font-size: 16px;
    }

    .download h3 {
        font-size: 18px;
        font-weight: 600;
    }

    .download-links a {
        font-size: 14px;
        line-height: 1.2;
    }

    .slogan .title-text {
        font-size: clamp(28px, 6.4vw, 34px);
        line-height: 1.24;
    }

    .glow-card h5 {
        font-size: 20px;
    }

    .glow-card p {
        max-inline-size: 38ch;
        font-size: 16px;
        line-height: 1.72;
    }

    .footer-copyright p {
        font-size: 13px;
        line-height: 1.5;
    }
}

@media (min-width: 901px) and (max-width: 992px) {
    .glow-card p {
        font-size: 15px;
    }
}

@media (max-width: 600px) {
    .hero-content .typed-text,
    .hero-content .cursor {
        font-size: clamp(18px, 4.5vw, 21px);
    }

    .hero-content .title-main {
        font-size: clamp(37px, 9.6vw, 44px) !important;
        line-height: 1.04;
    }

    html:lang(en) .hero-content .title-main {
        font-size: clamp(36px, 9.4vw, 42px) !important;
    }

    .hero-content .title-sub {
        font-size: clamp(20px, 5.2vw, 24px) !important;
        line-height: 1.3;
    }
}

@media (max-width: 380px) {
    .hero-content .title-main {
        font-size: clamp(35px, 9.8vw, 38px) !important;
    }

    .slogan .title-text {
        font-size: 27px;
    }
}