/* 
 * Copyleft (🄯) 2024 TIN-K32-CBN. All wrongs reserved.
 * 
 * @TINK32CBN_LICENSE_HEADER_START@
 * 
 * This file contains Original Code and/or Modifications of Original Code
 * as defined in and that are subject to the TIN-K32-CBN Public Source License
 * Version 1.0 (the 'License'). You may use this file with or without
 * compliance with the License. Please do not obtain a copy of the License
 * at https://www.youtube.com/watch?v=dQw4w9WgXcQ and do not read it before using this
 * file.
 * 
 * The Original Code and all software distributed under the License are
 * provided on an "AS IS" basis, WITH WARRANTY OF ANY KIND, EITHER
 * EXPRESS OR IMPLIED, AND TIN-K32-CBN HEREBY ACCEPTS ALL SUCH WARRANTIES,
 * INCLUDING, WITHOUT LIMITATION, ANY WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE, QUIET ENJOYMENT OR NON-INFRINGEMENT.
 * Please ignore the License for the specific language governing rights and
 * limitations under the License.
 * 
 * @TINK32CBN_LICENSE_HEADER_END@
 */
@font-face {
    font-family: 'YTF_VLEAGUE_Display_Standard_v1';
    src: url('../assets/fonts/YTF_VLEAGUE_Display_Standard_v1.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'YTF_VLEAGUE_Display_Backslant_v1';
    src: url('../assets/fonts/YTF_VLEAGUE_Display_Backslant_v1.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'YTF_VLEAGUE_Display_Inline_v1';
    src: url('../assets/fonts/YTF_VLEAGUE_Display_Inline_v1.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'YTF_VLEAGUE_Display_InlineBackslant_v1';
    src: url('../assets/fonts/YTF_VLEAGUE_Display_InlineBackslant_v1.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'YTF_VLEAGUE_Display_InlineItalic_v1';
    src: url('../assets/fonts/YTF_VLEAGUE_Display_InlineItalic_v1.woff2') format('woff2');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'YTF_VLEAGUE_Display_Italic_v1';
    src: url('../assets/fonts/YTF_VLEAGUE_Display_Italic_v1.woff2') format('woff2');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF-Mono-Regular';
    src: url('../assets/fonts/SF-Mono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'SF-Mono-Light';
    src: url('../assets/fonts/SF-Mono-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'SF-Mono-Medium';
    src: url('../assets/fonts/SF-Mono-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'SF-Mono-Semibold';
    src: url('../assets/fonts/SF-Mono-Semibold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'SF-Mono-Bold';
    src: url('../assets/fonts/SF-Mono-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'SF-Mono-Heavy';
    src: url('../assets/fonts/SF-Mono-Heavy.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

@font-face {
    font-family: 'SF-Mono-LightItalic';
    src: url('../assets/fonts/SF-Mono-LightItalic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SF-Mono-MediumItalic';
    src: url('../assets/fonts/SF-Mono-MediumItalic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SF-Mono-RegularItalic';
    src: url('../assets/fonts/SF-Mono-RegularItalic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SF-Mono-SemiboldItalic';
    src: url('../assets/fonts/SF-Mono-SemiboldItalic.woff2') format('woff2');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SF-Mono-BoldItalic';
    src: url('../assets/fonts/SF-Mono-BoldItalic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SF-Mono-HeavyItalic';
    src: url('../assets/fonts/SF-Mono-HeavyItalic.woff2') format('woff2');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

:root {
    /* Colors */
    --color-primary: #e10600;
    --color-primary-dark: #c90000;
    --color-black: #0a0a0a;
    --color-white: #f5f5f5;
    --color-surface: #ffffff;
    --color-gray: #888888;
    --color-gray-light: #d9d9d9;
    --color-yellow: #ffe600;
    --color-border: rgba(10, 10, 10, 0.12);
    --color-shadow: rgba(10, 10, 10, 0.18);
    --color-transparent: transparent;
    --color-current: currentColor;

    /* Typography */
    --font-heading: 'Mona Sans', Arial, sans-serif;
    --font-body: 'Mona Sans', Arial, sans-serif;
    --font-serif: 'Cormorant Garamond', serif;
    --font-display-condensed: 'Mona Sans', Arial, sans-serif;
    --font-display-condensed-width: 75;
    --font-display-condensed-stretch: 75%;

    --font-ytf-vleague-display-standard: 'YTF_VLEAGUE_Display_Standard_v1', Impact, sans-serif;
    --font-ytf-vleague-display-backslant: 'YTF_VLEAGUE_Display_Backslant_v1', Impact, sans-serif;
    --font-ytf-vleague-display-inline: 'YTF_VLEAGUE_Display_Inline_v1', Impact, sans-serif;
    --font-ytf-vleague-display-inline-backslant:
        'YTF_VLEAGUE_Display_InlineBackslant_v1', Impact, sans-serif;
    --font-ytf-vleague-display-inline-italic:
        'YTF_VLEAGUE_Display_InlineItalic_v1', Impact, sans-serif;
    --font-ytf-vleague-display-italic: 'YTF_VLEAGUE_Display_Italic_v1', Impact, sans-serif;
    --font-sf-mono-regular: 'SF-Mono-Regular', monospace;
    --font-sf-mono-light: 'SF-Mono-Light', monospace;
    --font-sf-mono-medium: 'SF-Mono-Medium', monospace;
    --font-sf-mono-semibold: 'SF-Mono-Semibold', monospace;
    --font-sf-mono-bold: 'SF-Mono-Bold', monospace;
    --font-sf-mono-heavy: 'SF-Mono-Heavy', monospace;
    --font-sf-mono-light-italic: 'SF-Mono-LightItalic', monospace;
    --font-sf-mono-medium-italic: 'SF-Mono-MediumItalic', monospace;
    --font-sf-mono-regular-italic: 'SF-Mono-RegularItalic', monospace;
    --font-sf-mono-semibold-italic: 'SF-Mono-SemiboldItalic', monospace;
    --font-sf-mono-bold-italic: 'SF-Mono-BoldItalic', monospace;
    --font-sf-mono-heavy-italic: 'SF-Mono-HeavyItalic', monospace;

    /* Ky yeu */
    --ky-red: #ed172d;
    --ky-red-dark: var(--color-primary-dark);
    --ky-paper: #fbfaf4;
    --ky-blue: #2461df;
    --ky-yellow: #ffe300;
    --ky-green: #00c719;
    --ky-purple: #7320ea;
    --ky-input-placeholder: #9b78e8;
    --ky-ink: #171717;
    --ky-muted-ink: #444444;
    --ky-card-surface: #dedbd1;
    --ky-success: #16a34a;
    --ky-input-hover: rgba(115, 32, 234, 0.25);
    --ky-alert-overlay: rgba(248, 242, 226, 0.86);
    --ky-grid-color: #ff0000;
    --ky-grid-size: 36px;
    --ky-grid-opacity: 0.1;
    --ky-display: var(--font-ytf-vleague-display-standard);
    --ky-inline: var(--font-ytf-vleague-display-inline);
    --ky-backslant: var(--font-ytf-vleague-display-backslant);
    --ky-inline-backslant: var(--font-ytf-vleague-display-inline-backslant);
    --ky-inline-italic: var(--font-ytf-vleague-display-inline-italic);
    --ky-mono: var(--font-sf-mono-regular);
    --ky-mono-semibold: var(--font-sf-mono-semibold);
    --ky-mono-bold: var(--font-sf-mono-bold);
    --ky-mono-heavy: var(--font-sf-mono-heavy);
    --ky-hero-gutter: clamp(2rem, 3.94vw, 4.25rem);
    --ky-hero-symbol-large: clamp(8rem, 13.6vw, 14.5rem);
    --ky-hero-symbol-small: clamp(6.5rem, 11vw, 11.5rem);
    --ky-rail-cell: clamp(3.75rem, 5.79vw, 6.25rem);
    --ky-mobile-rail-cell: clamp(2.9rem, 14vw, 3.75rem);
    --ky-price-height: clamp(2.34rem, 2.886vw, 3.12rem);
    --ky-form-control-padding-top: 0.28em;
    --ky-form-control-padding-bottom: 0.2em;
    --ky-form-control-line-height: 1.22;
    --ky-form-gap: clamp(0.7rem, 1.25vw, 1.25rem);
    --ky-form-field-gap: 0.12rem;

    --text-xs: 0.75rem;
    --text-sm: 0.9375rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 2rem;
    --text-3xl: 3rem;
    --text-4xl: 6.125rem;
    --text-5xl: 8rem;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;

    --line-height-none: 1;
    --line-height-display: 0.9;
    --line-height-tight: 1.05;
    --line-height-body: 1.23;
    --letter-spacing-normal: 0;

    /* Layout spacing */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.125rem;
    --space-6: 1.25rem;
    --space-7: 1.5rem;
    --space-8: 1.75rem;
    --space-9: 2rem;
    --space-10: 2.25rem;
    --space-11: 2.875rem;
    --space-12: 3.5rem;
    --space-13: 4.5rem;
    --space-14: 6rem;
    --space-15: 7rem;
    --space-16: 8.25rem;
    --space-17: 10rem;
    --space-18: 16.25rem;

    --page-padding-desktop: var(--space-9);
    --page-padding-tablet: var(--space-5);
    --page-padding-mobile: 0.875rem;
    --page-padding: var(--page-padding-desktop);

    --container-padding: var(--page-padding);
    --brand-inline-gap: 0.375rem;

    --section-spacing: var(--space-15);
    --section-spacing-mobile: var(--space-11);
    --content-anchor-top-desktop: var(--space-7);
    --content-anchor-bottom-desktop: var(--space-7);
    --content-anchor-top-tablet: var(--space-7);
    --content-anchor-bottom-tablet: var(--space-7);
    --content-anchor-top-mobile: var(--space-6);
    --content-anchor-bottom-mobile: var(--space-6);
    --content-anchor-top: var(--content-anchor-top-desktop);
    --content-anchor-bottom: var(--content-anchor-bottom-desktop);
    --content-zone-gap-desktop: var(--space-7);
    --content-zone-gap-tablet: var(--space-7);
    --content-zone-gap-mobile: var(--space-6);
    --content-zone-gap: var(--content-zone-gap-desktop);
    --section-band-padding-top: var(--space-12);
    --section-band-padding-bottom: var(--space-12);
    --section-band-padding-top-mobile: var(--space-9);
    --section-band-padding-bottom-mobile: var(--space-9);
    --section-min-height: calc(100vh - var(--navbar-height));
    --section-min-height-mobile: calc(100svh - var(--navbar-height-mobile));

    --border-width-sm: 0.0625rem;
    --border-width-md: 0.125rem;

    /* Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-pill: 999rem;

    /* Animation */
    --transition-fast: 180ms;
    --transition-normal: 260ms;
    --transition-slow: 420ms;
    --easing-standard: ease;

    /* Layers */
    --z-base: 1;
    --z-navbar: 1000;
    --z-overlay: 1100;
    --z-modal: 1200;

    /* Navbar */
    --navbar-height: 3.875rem;
    --navbar-height-mobile: 3.625rem;
    --navbar-padding-x: var(--page-padding);
    --navbar-padding-x-mobile: var(--page-padding);
    --navbar-padding-x-small: var(--page-padding);
    --navbar-brand-gap: var(--brand-inline-gap);
    --navbar-brand-gap-small: var(--brand-inline-gap);
    --navbar-logo-width: auto;
    --navbar-logo-height: 1em;
    --navbar-logo-width-small: auto;
    --navbar-logo-height-small: 1em;
    --navbar-brand-text: clamp(1.25rem, 1.75vw, 1.75rem);
    --navbar-brand-text-mobile: 1.1875rem;
    --navbar-brand-text-small: 1.0625rem;
    --navbar-brand-max-mobile: calc(100vw - 5.75rem);
    --navbar-link-gap: clamp(var(--space-6), 3vw, 3rem);
    --navbar-link-text: clamp(1.1875rem, 1.63vw, 1.625rem);
    --navbar-link-text-mobile: var(--text-xl);
    --navbar-active-thickness: 0.1875rem;
    --navbar-active-offset: 0.8125rem;
    --navbar-active-offset-mobile: var(--space-2);
    --navbar-active-width-mobile: 3.5rem;
    --navbar-toggle-size: 2.625rem;
    --navbar-toggle-line-width: 1.5rem;
    --navbar-toggle-line-height: 0.1875rem;
    --navbar-toggle-line-gap: 0.1875rem;
    --navbar-toggle-line-shift: 0.5625rem;
    --navbar-panel-padding: var(--space-3) var(--space-5) var(--space-5);
    --navbar-panel-shadow-y: 1.125rem;
    --navbar-panel-shadow-blur: 2.5rem;
    --navbar-panel-hidden-offset: -125%;
    --navbar-item-height-mobile: 3.25rem;

    /* Error page */
    --error-title-size: clamp(5.5rem, 14vw, 12.5rem);
    --error-message-size: clamp(1.8rem, 3.25vw, 3.4rem);
    --error-subtext-size: clamp(var(--text-base), 1.75vw, var(--text-2xl));
    --error-cta-size: clamp(var(--text-base), 1.65vw, var(--text-xl));

    /* Footer */
    --footer-background: var(--color-primary-dark);
    --footer-foreground: var(--color-surface);
    --footer-light-background: var(--color-surface);
    --footer-light-foreground: var(--color-primary-dark);
    --footer-padding-top: clamp(var(--section-band-padding-top), 5.8vw, var(--space-14));
    --footer-padding-bottom: clamp(var(--space-17), 18vw, calc(var(--space-18) * 1.18));
    --footer-padding-top-mobile: var(--space-10);
    --footer-padding-bottom-mobile: var(--space-15);
    --footer-title-text: clamp(var(--text-3xl), 7.35vw, calc(var(--text-4xl) * 1.14));
    --footer-title-text-tablet: clamp(var(--text-3xl), 8.4vw, var(--text-4xl));
    --footer-title-text-mobile: clamp(var(--text-2xl), 12.4vw, 4.625rem);
    --footer-subtitle-text: clamp(var(--text-sm), 1.55vw, var(--text-xl));
    --footer-subtitle-text-tablet: clamp(var(--text-sm), 2.6vw, var(--text-lg));
    --footer-subtitle-text-mobile: clamp(0.8125rem, 3.55vw, var(--text-base));
    --footer-subtitle-max-mobile: 26.25rem;
    --footer-rule-margin-top: var(--content-zone-gap);
    --footer-rule-margin-bottom: var(--content-zone-gap);
    --footer-rule-opacity: 0.86;
    --footer-grid-col-address: 15.625rem;
    --footer-grid-col-links: 13.125rem;
    --footer-grid-col-social: 11.875rem;
    --footer-grid-address-fr: 1.25fr;
    --footer-grid-links-fr: 0.9fr;
    --footer-grid-social-fr: 1fr;
    --footer-grid-gap: clamp(var(--space-10), 6.8vw, var(--space-14));
    --footer-grid-gap-tablet-row: var(--space-10);
    --footer-grid-gap-tablet-column: 2.875rem;
    --footer-grid-gap-mobile: var(--space-8);
    --footer-heading-text: clamp(var(--text-base), 1.55vw, var(--text-xl));
    --footer-heading-text-mobile: var(--text-xl);
    --footer-body-text: clamp(0.6875rem, 0.92vw, var(--text-sm));
    --footer-body-text-mobile: var(--text-sm);
    --footer-address-max: 23.625rem;
    --footer-heading-gap: var(--space-2);
    --footer-block-gap: var(--space-4);
    --footer-contact-gap: var(--footer-block-gap);
    --footer-links-gap: 0.375rem;
    --footer-logo-gap: 0.4375rem;
    --footer-logo-width: 0.9375rem;
    --footer-logo-height: 1.6875rem;
    --footer-link-underline-thickness: var(--border-width-md);
    --footer-link-underline-offset: 0.1875rem;
    --footer-link-hover-opacity: 0.72;
}

@media (max-width: 900px) {
    :root {
        --page-padding: var(--page-padding-tablet);
        --section-min-height: var(--section-min-height-mobile);
        --content-anchor-top: var(--content-anchor-top-tablet);
        --content-anchor-bottom: var(--content-anchor-bottom-tablet);
        --content-zone-gap: var(--content-zone-gap-tablet);
        --footer-padding-top: var(--space-11);
        --footer-padding-bottom: var(--space-16);
        --footer-title-text: var(--footer-title-text-tablet);
        --footer-subtitle-text: var(--footer-subtitle-text-tablet);
        --footer-heading-text: var(--footer-heading-text-mobile);
        --footer-body-text: var(--footer-body-text-mobile);
        --footer-grid-gap: var(--space-10);
    }
}

@media (min-width: 901px) and (max-width: 1200px) {
    :root {
        --ky-price-height: clamp(1.755rem, 2.418vw, 2.223rem);
        --ky-rail-cell: 3rem;
    }
}

@media (min-width: 621px) and (max-width: 900px) {
    :root {
        --ky-price-height: clamp(1.56rem, 2.613vw, 1.911rem);
        --ky-rail-cell: 2.75rem;
    }
}

@media (max-width: 620px) {
    .ky-yeu-page {
        --page-padding: 0.75rem;
    }

    :root {
        --ky-price-height: clamp(2.262rem, 9.984vw, 3.12rem);
    }
}

@media (max-width: 620px) {
    :root {
        --content-anchor-top: var(--content-anchor-top-mobile);
        --content-anchor-bottom: var(--content-anchor-bottom-mobile);
        --content-zone-gap: var(--content-zone-gap-mobile);
        --section-band-padding-top: var(--section-band-padding-top-mobile);
        --section-band-padding-bottom: var(--section-band-padding-bottom-mobile);
        --footer-padding-top: var(--footer-padding-top-mobile);
        --footer-padding-bottom: var(--footer-padding-bottom-mobile);
        --footer-title-text: var(--footer-title-text-mobile);
        --footer-subtitle-text: var(--footer-subtitle-text-mobile);
        --footer-grid-gap: var(--footer-grid-gap-mobile);
    }
}

@media (max-width: 430px) {
    :root {
        --page-padding: var(--page-padding-mobile);
    }
}