/* ============================================================
   ROOT — Global variables, fonts and reset
   ============================================================ */


/* ── Fonts ─────────────────────────────────────────────────── */

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-VariableFont_wght.ttf')
        format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf')
        format('truetype');
    font-weight: 100 900;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto_Mono/RobotoMono-VariableFont_wght.ttf')
        format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto_Mono/RobotoMono-Italic-VariableFont_wght.ttf')
        format('truetype');
    font-weight: 100 900;
    font-style: italic;
}


/* ── Variables ─────────────────────────────────────────────── */

:root {

    --cream:        #f5f0eb;
    --cream-light:  #E2D3BC;
    --sage:         #b5c4b1;
    --sage-dark:    #3B6242;
    --clay:         #c4956a;
    --charcoal:     #2e2e2e;
    --dark-bg:      #1e2820;
    --white:        #ffffff;
    --black:        #000000;

    --light-greenish: #9CADB1;
    --orange-brownish: #BD8437;
    --warm-grey: #687064;
    --pale-yellow: #EABD60;
    --pale-nothing: #E2D3BC;
    --blush-pink: #F6DACC;
    --finally-some-colour-orange: #C14B05;
    --blush-pink-for-shadow: #801414e3;
    --pissy-cream: #F4E8C9;
    --charcoal-hover: #787878;
    --trust-and-honesty: #dcb968;
    --being-wrong: #c9b984;
    --the-colours-of-some-buttons-and-some-background-circles: #d8ae7f;
    --spinning-plate-green: #7a9e7e;
    --the-wheels-on-the-bus-go-round-and-round-sage: #b5c4b2;
    --shadow-halo: rgba(0, 0, 0, 0.50);
    --charcoal-15: rgba(46, 46, 46, 0.15);
    --charcoal-25: rgba(46, 46, 46, 0.25);

    --dark-mode-shadow: #34483a;
    --dark-being-wrong: #56583c;
--dark-trust-and-honesty: #76582b;
    --dark-spinning-plate-green: #416d47;
    --dark-wheels-sage: #4f6053;

    --primary-font: 'Montserrat', sans-serif;
    --secondary-font: 'Roboto', sans-serif;


    --max-width: 1400px;
    --gutter: clamp(1.5rem, 5vw, 5rem);


    /* header sizing — one fluid scale instead of 3 breakpoints */

    --logo-size: clamp(0px, 12vw, 200px);
    --header-pad-y: clamp(10px, 2.5vw, 30px);
    --header-pad-x: clamp(10px, 2vw, 40px);
    --header-gap: clamp(24px, 12vw, 200px);
}


/* ── Reset ─────────────────────────────────────────────────── */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;
}


/* ── Global elements ───────────────────────────────────────── */
.section-divider {

    width: calc(100% - 64px);

    max-width: 1200px;

    height: 2px;

    margin: 120px auto 100px; 

    background: var(--charcoal);

}

body {
    font-family: var(--primary-font);
    font-size: 1.0625rem;
    line-height: 1.7;

    color: var(--charcoal);

    background: var(--pale-nothing);

    -webkit-font-smoothing: antialiased;
}


img {
    display: block;

    max-width: 100%;
    height: auto;
}


a {
    color: inherit;
    text-decoration: none;
}


ul {
    list-style: none;
}


video {
    display: block;

    width: 100%;
}


/* ============================================================
   DEVELOPMENT BANNER
   ============================================================ */

.development-banner {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    padding: 8px 50px 8px 20px;

    box-sizing: border-box;

    background: var(--charcoal);

    color: var(--white);

    font-family: var(--secondary-font);
    font-size: 11px;

    line-height: 1.4;

    text-align: center;

    z-index: 1000;
}


.development-banner p {
    margin: 0;
}


.development-banner-close {
    position: absolute;

    top: 50%;
    right: 14px;

    width: 28px;
    height: 28px;

    padding: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    transform: translateY(-50%);

    background: transparent;

    border: none;

    color: var(--white);

    font-family: var(--primary-font);
    font-size: 22px;
    font-weight: 300;

    line-height: 1;

    cursor: pointer;

    opacity: 0.75;

    transition: opacity 0.2s ease;
}


.development-banner-close:hover {
    opacity: 1;
}


.development-banner-close:focus-visible {
    outline: 2px solid var(--white);

    outline-offset: 2px;
}


@media (max-width: 374px) {

    .footer-separator {
        display: none;
    }

}