/* ROOT */

:root {

    /* COLORS */

    --color-night:
        #0B0F0D;

    --color-night-soft:
        #101512;

    --color-deep-forest:
        #15231E;

    --color-deep-forest-soft:
        #1A2A24;

    --color-moss:
        #3A4A37;

    --color-parchment:
        #D8C9AA;

    --color-parchment-light:
        #EEE5D1;

    --color-stone:
        #6C6F72;

    --color-bronze:
        #8A6A45;

    --color-gold:
        #B79A63;

    --color-gold-muted:
        #8E754D;

    --color-glow:
        #B86032;

    --color-glow-light:
        #D77842;

    --color-black:
        #000000;

    --color-white:
        #FFFFFF;


    /* TEXT */

    --color-text:
        var(--color-parchment);

    --color-text-muted:
        rgba(
            216,
            201,
            170,
            0.64
        );

    --color-heading:
        var(--color-parchment-light);

    --color-heading-accent:
        var(--color-gold);


    /* BACKGROUNDS */

    --background-main:
        var(--color-night);

    --background-section:
        #101713;

    --background-panel:
        rgba(
            21,
            35,
            30,
            0.74
        );

    --background-panel-strong:
        rgba(
            8,
            13,
            11,
            0.96
        );


    /* BORDERS */

    --border-color:
        rgba(
            183,
            154,
            99,
            0.16
        );

    --border-color-medium:
        rgba(
            183,
            154,
            99,
            0.28
        );

    --border-color-strong:
        rgba(
            183,
            154,
            99,
            0.48
        );

    --border-width:
        1px;

    --border-width-strong:
        2px;


    /* TYPOGRAPHY */

    --font-display:
        "Cinzel",
        Georgia,
        serif;

    --font-body:
        "Merriweather",
        Georgia,
        serif;

    --font-size-base:
        1rem;

    --line-height-base:
        1.7;

    --line-height-heading:
        1.05;

    --letter-spacing-heading:
        0.045em;

    --letter-spacing-label:
        0.15em;


    /* WIDTH */

    --content-width:
        90rem;

    --content-width-small:
        65rem;

    --page-padding:
        1.25rem;


    /* SPACING */

    --space-xs:
        0.5rem;

    --space-sm:
        0.75rem;

    --space-md:
        1rem;

    --space-lg:
        1.5rem;

    --space-xl:
        2rem;

    --space-2xl:
        3rem;

    --space-3xl:
        4.5rem;

    --space-4xl:
        6rem;

    --space-5xl:
        8rem;

    --section-space:
        var(--space-4xl);


    /* RADIUS */

    --radius-xs:
        0.125rem;

    --radius-sm:
        0.25rem;

    --radius-md:
        0.5rem;


    /* SHADOWS */

    --shadow-soft:
        0 0.75rem 2rem
        rgba(
            0,
            0,
            0,
            0.24
        );

    --shadow-panel:
        0 1rem 3rem
        rgba(
            0,
            0,
            0,
            0.34
        );

    --shadow-header:
        0 0.75rem 2.5rem
        rgba(
            0,
            0,
            0,
            0.42
        );


    /* TRANSITIONS */

    --transition-fast:
        150ms ease;

    --transition-normal:
        250ms ease;

    --transition-slow:
        400ms ease;


    /* Z-INDEX */

    --z-base:
        1;

    --z-header:
        1000;

    --z-overlay:
        1500;

    --z-modal:
        2000;
}


/* RESET */

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


html {
    scroll-behavior:
        smooth;
}


body {
    margin:
        0;

    background:
        radial-gradient(
            circle at 50% -10rem,
            rgba(
                58,
                74,
                55,
                0.08
            ),
            transparent 35rem
        ),
        var(--background-main);

    color:
        var(--color-text);

    font-family:
        var(--font-body);

    font-size:
        var(--font-size-base);

    line-height:
        var(--line-height-base);

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}


body.is-menu-open {
    overflow:
        hidden;
}


img,
picture,
svg {
    display:
        block;

    max-width:
        100%;
}


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


button {
    color:
        inherit;
}


a {
    color:
        inherit;

    text-decoration:
        none;
}


ul,
ol {
    margin:
        0;

    padding:
        0;
}


p {
    margin-top:
        0;
}


/* TYPOGRAPHY */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top:
        0;

    color:
        var(--color-heading);

    font-family:
        var(--font-display);

    font-weight:
        400;

    line-height:
        var(--line-height-heading);

    letter-spacing:
        var(--letter-spacing-heading);

    text-wrap:
        balance;
}


h1 {
    font-size:
        clamp(
            3rem,
            7vw,
            6.5rem
        );
}


h2 {
    font-size:
        clamp(
            2.25rem,
            5vw,
            4.5rem
        );
}


h3 {
    font-size:
        clamp(
            1.5rem,
            3vw,
            2.5rem
        );
}


p {
    max-width:
        46rem;
}


/* CONTAINERS */

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

    margin-inline:
        auto;
}


.container_small {
    width:
        min(
            var(--content-width-small),
            calc(
                100%
                -
                (
                    var(--page-padding)
                    *
                    2
                )
            )
        );

    margin-inline:
        auto;
}


/* MAIN */

.site_main {
    position:
        relative;

    z-index:
        var(--z-base);
}


/* HEADER */

.site_header {
    position:
        sticky;

    top:
        0;

    z-index:
        var(--z-header);

    width:
        100%;

    background:
        linear-gradient(
            180deg,
            #050908 0%,
            #080D0B 100%
        );

    border-bottom:
        1px solid
        rgba(
            183,
            154,
            99,
            0.08
        );

    box-shadow:
        var(--shadow-header);

    overflow:
        visible;
}


.site_header_inner {
    min-height:
        5.2rem;

    display:
        grid;

    grid-template-columns:
        minmax(
            13rem,
            1fr
        )
        auto
        minmax(
            13rem,
            1fr
        );

    align-items:
        center;

    gap:
        var(--space-xl);
}


/* HEADER LOGO */

.site_header_logo {
    justify-self:
        start;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.85rem;

    width:
        fit-content;

    transition:
        opacity
        var(--transition-fast);
}


.site_header_logo:hover,
.site_header_logo:focus-visible {
    opacity:
        0.82;
}


.site_header_logo_mark {
    width:
        3.15rem;

    height:
        3.15rem;

    flex:
        0 0 auto;
}


.site_header_logo_text {
    display:
        flex;

    flex-direction:
        column;

    color:
        var(--color-gold);

    font-family:
        var(--font-display);

    font-size:
        1.02rem;

    font-weight:
        400;

    line-height:
        0.97;

    letter-spacing:
        0.065em;

    text-transform:
        uppercase;
}


.site_header_logo_text span {
    display:
        block;
}


/* DESKTOP NAVIGATION */

.site_navigation {
    justify-self:
        center;
}


.site_navigation_list {
    display:
        flex;

    align-items:
        center;

    gap:
        clamp(
            1.8rem,
            3.5vw,
            4rem
        );

    list-style:
        none;
}


.site_navigation_link {
    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        5.2rem;

    color:
        rgba(
            216,
            201,
            170,
            0.6
        );

    font-family:
        var(--font-display);

    font-size:
        0.73rem;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

    white-space:
        nowrap;

    transition:
        color
        var(--transition-fast);
}


.site_navigation_link:hover,
.site_navigation_link:focus-visible {
    color:
        var(--color-parchment-light);
}


.site_navigation_link.is-active {
    color:
        var(--color-gold);
}


.site_navigation_link::after {
    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        0.82rem;

    width:
        0;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--color-gold),
            transparent
        );

    transform:
        translateX(-50%);

    transition:
        width
        var(--transition-normal);
}


.site_navigation_link:hover::after,
.site_navigation_link:focus-visible::after {
    width:
        1.4rem;
}


.site_navigation_link.is-active::after {
    width:
        2.6rem;
}


.site_navigation_link.is-active::before {
    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        0.70rem;

    width:
        0.30rem;

    height:
        0.30rem;

    border:
        1px solid
        var(--color-gold);

    background:
        var(--color-night);

    transform:
        translateX(-50%)
        rotate(45deg);

    z-index:
        2;
}


/* OXTARN */

.site_header_oxtarn {
    justify-self:
        end;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.48rem;

    color:
        var(--color-glow);

    font-family:
        var(--font-display);

    font-size:
        0.73rem;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

    white-space:
        nowrap;

    transition:
        color
        var(--transition-fast);
}


.site_header_oxtarn:hover,
.site_header_oxtarn:focus-visible {
    color:
        var(--color-glow-light);
}


.site_header_oxtarn_arrow {
    display:
        inline-block;

    font-size:
        0.88rem;

    transition:
        transform
        var(--transition-fast);
}


.site_header_oxtarn:hover
.site_header_oxtarn_arrow,
.site_header_oxtarn:focus-visible
.site_header_oxtarn_arrow {
    transform:
        translate(
            0.12rem,
            -0.12rem
        );
}


/* HEADER ORNAMENT */

.site_header_ornament {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 1px;

    pointer-events: none;
}


.site_header_ornament::before,
.site_header_ornament::after {
    content: "";

    position: absolute;

    top: 0;

    width: calc(50% - 2rem);
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(183, 154, 99, 0.10) 12%,
            rgba(183, 154, 99, 0.34) 55%,
            rgba(183, 154, 99, 0.72) 100%
        );
}


.site_header_ornament::before {
    left: 0;
}


.site_header_ornament::after {
    right: 0;

    transform: scaleX(-1);
}


.site_header_ornament_mark {
    position: absolute;

    left: 50%;
    top: 0;

    width: 4rem;
    height: 2.5rem;

    display: flex;

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

    transform:
        translate(-50%, -50%);

    z-index: 2;
}


.site_header_ornament_mark img {
    width: 2.5rem;
    height: 1.25rem;

    object-fit: contain;

    opacity: 0.92;
}


/* MOBILE MENU BUTTON */

.site_menu_button {
    display: none;

    position: relative;

    width: 2.8rem;
    height: 2.8rem;

    padding: 0;

    border: 1px solid var(--border-color-medium);

    background:
        rgba(21, 35, 30, 0.2);

    color: var(--color-gold);

    cursor: pointer;

    transition:
        border-color var(--transition-fast),
        background var(--transition-fast);
}

.site_menu_button:hover,
.site_menu_button:focus-visible {
    border-color: var(--border-color-strong);

    background:
        rgba(21, 35, 30, 0.45);
}


/* MENU LINES */

.site_menu_line {
    position: absolute;

    left: 50%;

    width: 1.15rem;
    height: 1px;

    background: currentColor;

    transform: translateX(-50%);

    transition:
        top var(--transition-normal),
        transform var(--transition-normal),
        opacity var(--transition-fast);
}

.site_menu_line:nth-child(1) {
    top: 0.8rem;
}

.site_menu_line:nth-child(2) {
    top: 1.25rem;
}

.site_menu_line:nth-child(3) {
    top: 1.7rem;
}


/* MENU OPEN */

.site_header.is-menu-open
.site_menu_line:nth-child(1) {
    top: 1.25rem;

    transform:
        translateX(-50%)
        rotate(45deg);
}

.site_header.is-menu-open
.site_menu_line:nth-child(2) {
    opacity: 0;
}

.site_header.is-menu-open
.site_menu_line:nth-child(3) {
    top: 1.25rem;

    transform:
        translateX(-50%)
        rotate(-45deg);
}


/* MOBILE NAVIGATION */

.site_mobile_navigation {
    display:
        none;
}


/* BUTTONS */

.button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        3rem;

    padding:
        0.8rem
        1.5rem;

    border:
        1px solid
        var(--border-color-medium);

    color:
        var(--color-parchment);

    font-family:
        var(--font-display);

    font-size:
        0.78rem;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

    transition:
        color
        var(--transition-fast),
        border-color
        var(--transition-fast),
        background
        var(--transition-fast);
}


.button_primary {
    background:
        rgba(
            58,
            74,
            55,
            0.6
        );

    border-color:
        var(--border-color-strong);

    color:
        var(--color-parchment-light);
}


.button_primary:hover,
.button_primary:focus-visible {
    background:
        rgba(
            58,
            74,
            55,
            0.82
        );

    border-color:
        var(--color-gold);
}


.button_regular {
    background:
        transparent;
}


.button_regular:hover,
.button_regular:focus-visible {
    border-color:
        var(--color-gold);

    color:
        var(--color-gold);
}


/* SECTIONS */

.site_section {
    position:
        relative;

    padding-block:
        var(--section-space);
}


.site_section_dark {
    background:
        var(--background-main);
}


.site_section_forest {
    background:
        var(--background-section);
}


/* EYEBROW */

.eyebrow {
    margin-bottom:
        var(--space-md);

    color:
        var(--color-gold-muted);

    font-family:
        var(--font-display);

    font-size:
        0.75rem;

    letter-spacing:
        var(--letter-spacing-label);

    text-transform:
        uppercase;
}


/* LINKS */

.text_link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        var(--space-sm);

    color:
        var(--color-gold);

    font-family:
        var(--font-display);

    font-size:
        0.82rem;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

    transition:
        color
        var(--transition-fast);
}


.text_link:hover,
.text_link:focus-visible {
    color:
        var(--color-parchment-light);
}


/* PANELS */

.panel {
    background:
        linear-gradient(
            180deg,
            rgba(
                21,
                35,
                30,
                0.82
            ),
            rgba(
                11,
                15,
                13,
                0.94
            )
        );

    border:
        var(--border-width)
        solid
        var(--border-color);

    box-shadow:
        var(--shadow-panel);
}


/* DIVIDER */

.divider {
    width:
        100%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--border-color-strong),
            transparent
        );
}


/* RESPONSIVE */

@media (
    min-width:
    48rem
) {

    :root {
        --page-padding:
            2rem;

        --section-space:
            5rem;
    }
}


@media (
    min-width:
    64rem
) {

    :root {
        --page-padding:
            2.5rem;

        --section-space:
            6rem;
    }
}


@media (
    min-width:
    80rem
) {

    :root {
        --page-padding:
            3rem;

        --section-space:
            7rem;
    }
}


@media (
    max-width:
    64rem
) {

    .site_header_inner {
        min-height:
            4.9rem;

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

        gap:
            var(--space-lg);
    }


    .site_header_logo_mark {
        width:
            2.75rem;

        height:
            2.75rem;
    }


    .site_header_logo_text {
        font-size:
            0.9rem;
    }


    .site_navigation,
    .site_header_oxtarn {
        display:
            none;
    }


    .site_menu_button {
        display:
            block;
    }


    .site_mobile_navigation {
        display:
            grid;

        grid-template-rows:
            0fr;

        background:
            linear-gradient(
                180deg,
                #080D0B,
                #0A100D
            );

        border-top:
            1px solid
            rgba(
                183,
                154,
                99,
                0.08
            );

        overflow:
            hidden;

        transition:
            grid-template-rows
            var(--transition-slow);
    }


    .site_header.is-menu-open
    .site_mobile_navigation {
        grid-template-rows:
            1fr;
    }


    .site_mobile_navigation_inner {
        min-height:
            0;

        overflow:
            hidden;

        display:
            flex;

        flex-direction:
            column;

        padding-top:
            0;

        padding-bottom:
            0;

        transition:
            padding
            var(--transition-slow);
    }


    .site_header.is-menu-open
    .site_mobile_navigation_inner {
        padding-top:
            var(--space-lg);

        padding-bottom:
            var(--space-2xl);
    }


    .site_mobile_link {
        position:
            relative;

        display:
            flex;

        align-items:
            center;

        min-height:
            4rem;

        border-bottom:
            1px solid
            var(--border-color);

        color:
            rgba(
                216,
                201,
                170,
                0.66
            );

        font-family:
            var(--font-display);

        font-size:
            0.92rem;

        letter-spacing:
            0.14em;

        text-transform:
            uppercase;

        transition:
            color
            var(--transition-fast),
            padding
            var(--transition-fast);
    }


    .site_mobile_link:hover,
    .site_mobile_link:focus-visible {
        color:
            var(--color-parchment-light);
    }


    .site_mobile_link.is-active {
        padding-left:
            1.5rem;

        color:
            var(--color-gold);
    }


    .site_mobile_link.is-active::before {
        content:
            "";

        position:
            absolute;

        left:
            0.25rem;

        width:
            0.4rem;

        height:
            0.4rem;

        border:
            1px solid
            var(--color-gold);

        transform:
            rotate(
                45deg
            );
    }


    .site_mobile_oxtarn {
        display:
            inline-flex;

        align-items:
            center;

        gap:
            0.55rem;

        width:
            fit-content;

        margin-top:
            var(--space-xl);

        color:
            var(--color-glow);

        font-family:
            var(--font-display);

        font-size:
            0.82rem;

        letter-spacing:
            0.15em;

        text-transform:
            uppercase;
    }


    .site_header_ornament_mark {
        width:
            6.5rem;

        height:
            2rem;
    }
}


@media (
    max-width:
    30rem
) {

    :root {
        --page-padding:
            1rem;
    }


    .site_header_logo_mark {
        width:
            2.5rem;

        height:
            2.5rem;
    }


    .site_header_logo_text {
        font-size:
            0.8rem;

        letter-spacing:
            0.05em;
    }


    .site_menu_button {
        width:
            2.6rem;

        height:
            2.6rem;
    }


    .site_mobile_link {
        min-height:
            3.75rem;

        font-size:
            0.84rem;
    }
}