@font-face {
    font-family: "Philosopher";
    src: url("fonts/philosopher-700.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("fonts/manrope-variable.woff2") format("woff2");
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
}

/* Selected Akeron typography: expressive headings and readable interface text. */
html:root {
    --type-display: "Philosopher", Georgia, serif;
    --type-body: "Manrope", Arial, sans-serif;
    --type-display-weight: 700;
    --type-label-weight: 700;
    --type-interface-weight: 600;
    --type-body-weight: 400;
    --type-heading-tracking: 0;
    --type-scale: 1;
    font-synthesis: none;
}

html:root body {
    font-family: var(--type-body);
    font-size: calc(16px * var(--type-scale));
    font-weight: var(--type-body-weight);
    line-height: 1.65;
}

html:root body.winter-design {
    font-size: calc(20px * var(--type-scale));
    line-height: 1.6;
}

/* Text controls keep a readable interface face; icon fonts are not targeted. */
html:root input,
html:root select,
html:root textarea,
html:root button:not(.fa):not(.ra):not([class*="fa-"]),
html:root .text-input,
html:root .step-button,
html:root .languages a,
html:root .back-link,
html:root .field-label,
html:root .field-hint,
html:root .choice,
html:root .optional,
html:root .character-counter {
    font-family: var(--type-body);
}

html:root input,
html:root select,
html:root textarea,
html:root .text-input {
    font-size: calc(17px * var(--type-scale));
    font-weight: 400;
    line-height: 1.45;
}

html:root h1,
html:root h2,
html:root h3,
html:root h4,
html:root .section__title,
html:root .main__title,
html:root .text-area h1,
html:root .text-area h2,
html:root .text-area h3,
html:root .winter-hero h1,
html:root .application-intro h1,
html:root .form-panel h2,
html:root .cbt-invitation h2,
html:root .cbt-invitation .cbt-reward h3,
html:root .cbt-reward-viewer h2 {
    font-family: var(--type-display);
    font-weight: var(--type-display-weight);
    letter-spacing: var(--type-heading-tracking);
    text-wrap: balance;
}

html:root .main-start__item-title-text,
html:root .main-start__item-title-text span,
html:root .main-hero__info-item-name span {
    font-family: var(--type-display);
    font-weight: var(--type-display-weight);
    letter-spacing: var(--type-heading-tracking);
}

html:root .header__promo h1 {
    font-size: clamp(34px, 3.15vw, 52px);
    line-height: 1.2;
}

html:root h2.section__title {
    font-size: clamp(28px, 2.6vw, 42px);
    line-height: 1.2;
}

html:root h1 span:not(.fa):not(.ra):not([class*="fa-"]),
html:root h2 span:not(.fa):not(.ra):not([class*="fa-"]),
html:root h3 span:not(.fa):not(.ra):not([class*="fa-"]) {
    font-family: inherit;
    font-weight: inherit;
}

/* Keep navigation compact while the framed primary actions carry the display voice. */
html:root .nav__menu,
html:root .button,
html:root .nav__menu li,
html:root .winter-design ul.nav__menu,
html:root .winter-design .nav__auth .btn,
html:root .brand,
html:root .footer-menu-col,
html:root .main-social__item-button,
html:root .promo-language-switch {
    font-family: var(--type-body);
    font-weight: var(--type-interface-weight);
}

html:root .footer__nav-title,
html:root footer h4 {
    font-family: var(--type-body);
    font-weight: var(--type-interface-weight);
}

html:root .winter-register,
html:root .winter-announcement,
html:root .winter-opening,
html:root .btn.red,
html:root .btn.grey,
html:root .button span:not(.fa):not(.ra):not([class*="fa-"]),
html:root .primary-action,
html:root .cbt-invitation .cbt-invitation__action {
    font-family: var(--type-display);
    font-weight: var(--type-label-weight);
    letter-spacing: .015em;
}

html:root .winter-hero__description,
html:root .gallery-copy p,
html:root .gallery-counter,
html:root .ytb-caption,
html:root .cbt-invitation,
html:root .cbt-invitation p,
html:root .cbt-exclusive,
html:root .intro-copy,
html:root .intro-note,
html:root .form-description {
    font-family: var(--type-body);
}

html:root .winter-hero h1 {
    font-size: calc(clamp(34px, 3.15vw, 52px) * var(--type-scale));
    line-height: 1.2;
}

html:root .winter-hero__description {
    font-size: calc(clamp(16px, 1.17vw, 20px) * var(--type-scale));
    font-weight: 500;
    line-height: 1.75;
}

html:root .text-area {
    font-size: calc(18px * var(--type-scale));
    font-weight: 400;
    line-height: 1.7;
}

/* The reading face has no italic file; retain emphasis with a real weight. */
html:root .text-area em {
    font-style: normal;
    font-weight: 600;
}

html:root .main__content .text-area > p {
    max-width: 75ch;
    text-wrap: pretty;
}

html:root .intro-copy {
    font-size: calc(16px * var(--type-scale));
    font-weight: 400;
    line-height: 1.75;
}

html:root .field-label {
    font-size: calc(16px * var(--type-scale));
    font-weight: var(--type-interface-weight);
}

html:root .gallery-counter,
html:root .character-counter {
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1240px) {
    html:root .text-area {
        font-size: calc(16px * var(--type-scale));
    }
}

@media (max-width: 700px) {
    html:root .header__promo h1 {
        font-size: calc(30px * var(--type-scale));
    }

    html:root .winter-hero h1 {
        font-size: calc(29px * var(--type-scale));
    }

    html:root .winter-hero__description {
        font-size: calc(16px * var(--type-scale));
    }

    html:root .winter-announcement,
    html:root .winter-register {
        letter-spacing: .005em;
    }
}

@media (max-width: 360px) {
    html:root .winter-hero h1 {
        font-size: calc(26px * var(--type-scale));
    }
}