/* =========================================
   RESET
========================================= */

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

html {
    scroll-behavior: smooth;
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol {
    margin: 0;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

img,
picture {
    display: block;
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    border: 0;
}

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


/* =========================================
   VARIABLES
========================================= */

:root {

    /* Colors */

    --black: #080a09;
    --black-soft: #101210;
    --black-light: #191b18;

    --white: #ffffff;
    --off-white: #f2f0e9;

    --yellow: #f5ae00;
    --yellow-light: #ffc01c;
    --yellow-dark: #d99500;
    --yellow-text: #866407;

    --text-dark: #151714;
    --text-light: #f4f4f2;
    --text-muted: #a6aaa4;


    /* Typography */

    --font-display: "Barlow Condensed", sans-serif;
    --font-body: "Inter", sans-serif;


    /* Layout */

    --container: 1440px;
    --container-padding: 3rem;


    /* Misc */

    --transition: 200ms ease;
}


/* =========================================
   BASE
========================================= */

html {
    font-size: 16px;
}

body {
    min-width: 320px;

    background: var(--off-white);
    color: var(--text-dark);

    font-family: var(--font-body);
    line-height: 1.6;

    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}


/* =========================================
   CONTAINER
========================================= */

.container {
    width: min(
        calc(100% - (var(--container-padding) * 2)),
        var(--container)
    );

    margin-inline: auto;
}


/* =========================================
   COMMON TYPOGRAPHY
========================================= */

.eyebrow {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    color: var(--yellow);

    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    line-height: 1;
    text-transform: uppercase;
}

.eyebrow::before {
    content: "";

    width: 2.5rem;
    height: 3px;

    background: currentColor;
}


/* =========================================
   BUTTONS
========================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;

    min-height: 3.75rem;
    padding: 0.8rem 1.75rem;

    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;

    transition:
        background-color var(--transition),
        color var(--transition),
        transform var(--transition);
}

.btn:hover {
    transform: translateY(-2px);
}

.btn--primary {
    background: var(--yellow);
    color: var(--black);
}

.btn--primary:hover {
    background: var(--yellow-light);
}

.btn__arrow {
    font-family: var(--font-body);
    font-size: 1.15rem;
}


/* =========================================
   ACCESSIBILITY
========================================= */

:focus-visible {
    outline: 3px solid var(--yellow);
    outline-offset: 4px;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1024px) {

    :root {
        --container-padding: 2rem;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    :root {
        --container-padding: 1.25rem;
    }

    .eyebrow {
        font-size: 0.85rem;
    }

    .eyebrow::before {
        width: 1.75rem;
    }

}