:root {
    --gold: #c6923e;
    --gold-light: #e1b967;

    --forest: #193430;
    --forest-soft: #31463f;

    --cream: #f7f3eb;
    --sand: #eee4d4;

    --paper: #ffffff;

    --ink: #263532;
    --muted: #817b72;

    --border:
        rgba(25,52,48,.12);

    --content:
        1440px;
}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    color:
        var(--ink);

    background:
        #faf9f6;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


a {
    color:
        inherit;

    text-decoration:
        none;
}


button,
input {
    font: inherit;
}


.site-header {
    min-height: 72px;

    padding:
        0 max(
            4vw,
            calc(
                (100vw - var(--content)) / 2
            )
        );

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 38px;

    position: sticky;

    top: 0;

    z-index: 1000;

    background:
        rgba(
            255,
            255,
            255,
            .97
        );

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

    backdrop-filter:
        blur(14px);
}


.brand {
    display: flex;

    align-items: center;

    gap: 10px;
}


.brand-symbol {
    color:
        var(--gold);

    font-size:
        43px;

    line-height:
        1;
}


.brand-name {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        22px;

    letter-spacing:
        .02em;
}


.brand-tagline {
    margin-top:
        3px;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        .05em;
}


.main-nav {
    height:
        72px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        27px;
}


.main-nav a {
    height:
        72px;

    display:
        flex;

    align-items:
        center;

    border-bottom:
        3px solid transparent;

    font-size:
        12px;
}


.main-nav a:hover,
.main-nav .active {
    border-color:
        var(--gold);
}


.header-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;
}


.header-actions button {
    border:
        0;

    padding:
        7px;

    background:
        transparent;

    font-size:
        18px;

    cursor:
        pointer;
}


.search-box {
    width:
        210px;

    height:
        35px;

    padding:
        0 14px;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    background:
        #f5f5f3;

    border-radius:
        24px;
}


.search-box input {
    width:
        100%;

    min-width:
        0;

    border:
        0;

    outline:
        0;

    background:
        transparent;

    font-size:
        11px;
}


.cart-button {
    position:
        relative;
}


.cart-button span {
    width:
        15px;

    height:
        15px;

    position:
        absolute;

    top:
        0;

    right:
        0;

    display:
        grid;

    place-items:
        center;

    color:
        white;

    background:
        var(--gold);

    border-radius:
        50%;

    font-size:
        8px;
}


.hero {
    min-height:
        410px;

    position:
        relative;

    overflow:
        hidden;

    background-image:
        url(
            "/assets/images/home/hero.webp"
        );

    background-position:
        center;

    background-size:
        cover;
}


.hero-shade {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(8,20,17,.78) 0%,
            rgba(8,20,17,.53) 34%,
            rgba(8,20,17,.10) 70%
        );
}


.hero-inner {
    width:
        min(
            92vw,
            var(--content)
        );

    min-height:
        410px;

    margin:
        auto;

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;
}


.hero-copy {
    width:
        590px;

    color:
        white;
}


.hero-kicker,
.section-kicker {
    color:
        var(--gold-light);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .24em;
}


.hero h1 {
    margin:
        12px 0;

    font-family:
        Georgia,
        serif;

    font-weight:
        400;

    font-size:
        clamp(
            42px,
            4vw,
            66px
        );

    line-height:
        .98;
}


.hero-text {
    max-width:
        570px;

    margin:
        0;

    font-size:
        16px;

    line-height:
        1.4;
}


.hero-buttons {
    margin-top:
        20px;

    display:
        flex;

    gap:
        12px;
}


.button {
    min-height:
        46px;

    padding:
        0 25px;

    display:
        inline-flex;

    justify-content:
        center;

    align-items:
        center;

    border-radius:
        30px;

    font-size:
        13px;

    font-weight:
        700;
}


.button-primary {
    color:
        #142521;

    background:
        linear-gradient(
            135deg,
            #e4bd67,
            #c8933e
        );
}


.button-secondary {
    color:
        white;

    border:
        1px solid white;

    background:
        rgba(255,255,255,.04);
}


.hero-mantra {
    margin-right:
        5%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    color:
        white;

    font-family:
        "Brush Script MT",
        cursive;

    font-size:
        32px;

    line-height:
        1.1;

    transform:
        rotate(-5deg);
}


.hero-mantra strong {
    margin-top:
        12px;

    color:
        var(--gold-light);

    font-size:
        40px;
}


.themes {
    padding:
        8px;

    display:
        grid;

    grid-template-columns:
        repeat(7, 1fr);

    gap:
        7px;

    background:
        white;
}


.theme {
    min-height:
        155px;

    padding:
        18px;

    position:
        relative;

    overflow:
        hidden;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        flex-end;

    color:
        white;

    border-radius:
        5px;

    background-image:
        linear-gradient(
            transparent 30%,
            rgba(8,15,12,.82)
        ),
        var(--theme-image);

    background-position:
        center;

    background-size:
        cover;
}


.theme::after {
    content: "";

    width:
        40px;

    height:
        2px;

    margin-top:
        10px;

    background:
        var(--gold-light);
}


.theme-icon {
    color:
        var(--gold-light);

    font-size:
        30px;
}


.theme strong {
    margin-top:
        6px;

    font-family:
        Georgia,
        serif;

    font-size:
        19px;

    font-weight:
        400;
}


.section {
    width:
        min(
            90vw,
            var(--content)
        );

    margin:
        auto;

    padding:
        35px 0;
}


.section-header {
    margin-bottom:
        15px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;
}


.section-header h2,
.services-heading h2 {
    margin:
        4px 0;

    color:
        var(--forest);

    font-family:
        Georgia,
        serif;

    font-size:
        31px;

    font-weight:
        400;
}


.section-header p,
.services-heading p {
    margin:
        0;

    color:
        var(--muted);

    font-size:
        12px;
}


.section-header > a {
    color:
        var(--gold);

    font-size:
        11px;

    text-decoration:
        underline;
}


.journal-grid {
    display:
        grid;

    grid-template-columns:
        repeat(6,1fr);

    gap:
        12px;
}


.journal-card {
    overflow:
        hidden;

    background:
        white;

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

    border-radius:
        7px;
}


.journal-image {
    height:
        105px;

    padding:
        8px;

    display:
        flex;

    align-items:
        flex-end;

    background-position:
        center;

    background-size:
        cover;
}


.journal-image span {
    padding:
        4px 9px;

    color:
        #3d3b35;

    background:
        rgba(255,255,255,.93);

    border-radius:
        15px;

    font-size:
        8px;

    text-transform:
        uppercase;
}


.journal-content {
    padding:
        9px;
}


.journal-content h3 {
    min-height:
        50px;

    margin:
        0;

    color:
        var(--forest);

    font-family:
        Georgia,
        serif;

    font-size:
        15px;

    line-height:
        1.2;
}


.journal-content small {
    display:
        block;

    margin-top:
        8px;

    color:
        #9b958d;

    font-size:
        8px;
}


.services {
    padding:
        20px max(
            5vw,
            calc(
                (100vw - var(--content))/2
            )
        );

    display:
        grid;

    grid-template-columns:
        .9fr 1.6fr;

    gap:
        50px;

    align-items:
        center;

    background:
        linear-gradient(
            90deg,
            #f1e7d6,
            #f7f2e8
        );
}


.service-grid {
    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:
        22px;
}


.service {
    display:
        flex;

    align-items:
        center;

    gap:
        11px;
}


.service i {
    width:
        52px;

    height:
        52px;

    flex:
        0 0 52px;

    display:
        grid;

    place-items:
        center;

    color:
        var(--gold);

    background:
        #f7edda;

    border-radius:
        50%;

    font-size:
        25px;

    font-style:
        normal;
}


.service strong {
    font-family:
        Georgia,
        serif;

    font-size:
        14px;

    font-weight:
        400;
}


.service p {
    margin:
        3px 0 0;

    color:
        #857f77;

    font-size:
        9px;

    line-height:
        1.3;
}


.shop {
    padding-top:
        23px;
}


.product-grid {
    display:
        grid;

    grid-template-columns:
        repeat(8,1fr);

    gap:
        12px;
}


.product-card {
    min-width:
        0;
}


.product-image {
    aspect-ratio:
        1.25;

    position:
        relative;

    overflow:
        hidden;

    border-radius:
        6px;

    background:
        #eee8df;
}


.product-image img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .35s ease;
}


.product-card:hover img {
    transform:
        scale(1.04);
}


.product-placeholder {
    height:
        100%;

    display:
        grid;

    place-items:
        center;

    color:
        var(--gold);

    font-size:
        40px;
}


.favourite {
    width:
        25px;

    height:
        25px;

    position:
        absolute;

    top:
        6px;

    right:
        6px;

    border:
        0;

    border-radius:
        50%;

    background:
        rgba(255,255,255,.94);

    cursor:
        pointer;
}


.product-card h3 {
    min-height:
        32px;

    margin:
        7px 0 4px;

    font-size:
        10px;

    line-height:
        1.3;

    font-weight:
        500;
}


.price {
    color:
        #b67f31;

    font-size:
        11px;
}


.products-loading {
    grid-column:
        1/-1;

    padding:
        45px;

    color:
        var(--muted);

    text-align:
        center;
}


@media (
    max-width: 1250px
) {

    .main-nav {
        display:
            none;
    }

    .site-header {
        grid-template-columns:
            1fr auto;
    }

    .themes {
        grid-template-columns:
            repeat(4,1fr);
    }

    .journal-grid {
        grid-template-columns:
            repeat(3,1fr);
    }

    .product-grid {
        grid-template-columns:
            repeat(4,1fr);
    }

    .services {
        grid-template-columns:
            1fr;
    }

}


@media (
    max-width: 720px
) {

    .site-header {
        min-height:
            66px;

        padding:
            0 15px;
    }

    .brand-name {
        font-size:
            17px;
    }

    .brand-tagline,
    .search-box {
        display:
            none;
    }

    .hero {
        min-height:
            480px;
    }

    .hero-inner {
        min-height:
            480px;
    }

    .hero-copy {
        width:
            100%;
    }

    .hero h1 {
        font-size:
            44px;
    }

    .hero-mantra {
        display:
            none;
    }

    .hero-buttons {
        flex-direction:
            column;

        align-items:
            flex-start;
    }

    .themes {
        grid-template-columns:
            repeat(2,1fr);
    }

    .journal-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

    .service-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

    .product-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

}


@media (
    max-width: 450px
) {

    .journal-grid {
        grid-template-columns:
            1fr;
    }

}