/**
 * Custom CSS
 *
 * This file is for your custom styles.
 * You can add any CSS rules here to customize the Ghost theme.
 *
 * Note: Changes made directly to this file may be overwritten during theme updates.
 * It's recommended to use the Code Injection feature in Ghost for persistent customizations.
 */

/* Your custom CSS goes below this line */

@font-face {
    font-family: 'Neue Haas Grotesk Display';
    src: url('/assets/fonts/NeueHaasGroteskDisplay-Reg.woff2') format('woff2'),
        url('/assets/fonts/NeueHaasGroteskDisplay-Reg.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Neue Haas Grotesk Text';
    src: url('/assets/fonts/NeueHaasGroteskText-Regular.woff2') format('woff2'),
        url('/assets/fonts/NeueHaasGroteskText-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Neue Haas Grotesk Text';
    src: url('/assets/fonts/NeueHaasGroteskText-Italic.woff2') format('woff2'),
        url('/assets/fonts/NeueHaasGroteskText-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

:root {
    --gh-font-body: 'Neue Haas Grotesk Text', sans-serif;
    --gh-font-heading: 'Neue Haas Grotesk Display', sans-serif;
    --color-foreground: #263C4E;
    --color-contrast: #181C24;
}
:root[data-color-scheme=dark] {
    --color-background: #181C24;
}

@media (prefers-color-scheme: dark) {
    :root[data-color-scheme=system] {
        --color-background: #181C24;
    }
}
h1, h2, h3, h4, h5, h6, p, a.button {
    font-family: 'Neue Haas Grotesk Display' !important;
}
:where(.navigation) ul, .header-buttons a {
    font-weight: 400 !important;
    text-transform: uppercase;
}
.home-template .section-hero-content h1 {
    font-size: 24px;
    font-weight: 400 !important;
}
.home-template .section-hero-content h1:after {
    content: '™';
    font-size: 60%;
    position: absolute;
    padding-top: 2.5px;
}