:root {

    --paper: #ccbd9563;
    --paper-light: #e8e2d4;

    --ink: #000510d7;

    --green: #566044;
    --green-dark: #39412f;

    --text-soft: rgba(62, 57, 45, 0.7);
    --text-faint: rgba(23, 14, 40, 0.468);

    --border: rgba(41, 38, 31, 0.16);

    --panel: rgba(243, 238, 228, 0.78);

    --shadow: rgba(40, 35, 25, 0.244);
    --shadow-soft: rgba(40, 35, 25, 0.114);

    --font-display: "IM Fell English", Georgia, serif;
    --font-mono: "Courier Prime", "Courier New", monospace;
    --font-body: "Special Elite", "Courier New", monospace;

    --text-small: 0.7rem;
    --text-body: 1.05rem;
    --text-lead: 1.3rem;

    --heading-small: 1.8rem;
    --heading-medium: 2.5rem;
    --heading-large: 4rem;

    --content-width: 1000px;
    --narrow-width: 800px;

    --page-width: 92%;

    --gap-small: 16px;
    --gap-medium: 24px;
    --gap-large: 40px;

    --radius: 10px;
}


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

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    position: relative;

    min-height: 100vh;

    margin: 0;

    color: var(--ink);
    background: var(--paper);

    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 400;

    line-height: 1.65;

    -webkit-font-smoothing: antialiased;
}


img {
    max-width: 100%;
}


a {
    color: inherit;
}


button {
    font: inherit;
}



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

.container {
    width: min(var(--content-width), var(--page-width));
    margin-inline: auto;
}



/* =========================================================
   HEADER
   ========================================================= */

.site-header {
    padding: 20px;
    text-align: center;

    background-color: #f7f4f39c;
}


.site-logo-link {
    display: inline-block;
}


.logo {
    display: block;

    width: 190px;

    margin: 50px auto 0;

    filter:
        drop-shadow(
            5px 5px 5px rgba(167,112,82,.524)
        );

    transition:
        transform .25s ease;
}


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



/* =========================================================
   NAVIGATION
   ========================================================= */

.main-nav {

    width: 100%;

    display: flex;

    flex-direction: row;
    flex-wrap: nowrap;

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

    gap: 35px;

    margin-top: 45px;
    margin-bottom: 35px;
}


.main-nav a {

    width: 150px;
    min-width: 82px;

    display: flex;

    flex-direction: column;

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

    padding: 5px 4px 8px;

    color: var(--green-dark);

    background: transparent;

    border: 1px solid transparent;
    border-radius: 6px;

    font-family: var(--font-mono);
    font-size: 18px;

    line-height: 1.2;

    letter-spacing: .07em;

    text-decoration: none;
    text-transform: uppercase;

    transition:
        background .25s ease;
}


.main-nav a:hover {
    background: rgba(243,238,228,.25);
}


.main-nav .nav-letter {

    display: block;

    width: 100px;
    height: 100px;

    min-width: 100px;
    min-height: 100px;

    margin: 0 auto 7px;

    padding: 0;

    object-fit: contain;

    border-radius: 4px;

    opacity: 1;
    visibility: visible;

    transition:
        transform 1s ease,
        filter 1s ease;
}


.main-nav a:hover .nav-letter {

    transform:
        translateY(-12px)
        scale(1.1);

}



/* =========================================================
   MAIN
   ========================================================= */

.main-content {
    padding: 25px 0 80px;
}



/* =========================================================
   WELCOME / PAGE TITLE
   ========================================================= */

.hq-welcome {

    width: min(
        var(--narrow-width),
        var(--page-width)
    );

    margin: 0 auto 60px;

    text-align: center;
}


.label-tag {

    display: inline-block;

    margin-bottom: 10px;

    color: var(--green-dark);

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

    font-size: .65rem;

    letter-spacing: .12em;

    text-transform: uppercase;
}


.hq-welcome h2 {

    margin: 0;

    color: var(--green-dark);

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

    font-size:
        clamp(
            2.4rem,
            6vw,
            4rem
        );

    font-weight: 400;

    line-height: 1.1;
}


.hq-lead {

    margin: 12px 0 0;

    color: var(--text-soft);

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

    font-size: .7rem;

    letter-spacing: .08em;
}



/* =========================================================
   TRADING POST SECTION
   ========================================================= */

.tp-section {

    width: min(
        1100px,
        var(--page-width)
    );

    margin: 0 auto 80px;
}



/* =========================================================
   FILTER BAR
   ========================================================= */

.filter-bar {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 8px;

    margin-bottom: 35px;
}


.filter-btn {

    padding: 8px 13px;

    color: var(--green-dark);

    background: rgba(243,238,228,.45);

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

    border-radius: 5px;

    cursor: pointer;

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

    font-size: .62rem;

    letter-spacing: .06em;

    text-transform: uppercase;

    transition:
        background .2s ease,
        transform .2s ease;
}


.filter-btn:hover {

    background: rgba(243,238,228,.8);

    transform: translateY(-1px);
}


.filter-btn.active {

    color: var(--paper-light);

    background: var(--green-dark);

}



/* =========================================================
   PRODUCT GRID
   ========================================================= */

.tp-grid {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 28px;
}



/* =========================================================
   PRODUCT CARD
   ========================================================= */

.tp-card {

    display: flex;

    flex-direction: column;

    min-width: 0;

    background:
        var(--panel);

    background-color:
        #f8c8c811;

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

    border-radius:
        var(--radius);

    box-shadow:
        0 10px 25px var(--shadow-soft);

    overflow: hidden;
}



/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

.tp-image {

    display: block;

    width: 100%;

    aspect-ratio: 1 / 1;

    padding: 15px;

    overflow: hidden;

    background:
        var(--paper-light);

    text-decoration: none;
}


.tp-image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transition:
        transform .3s ease;
}


.tp-image:hover img {

    transform:
        scale(1.025);
}



/* CATEGORY TINTS */

.tp-card.cat-painting .tp-image {

    background:
        rgba(
            225,
            205,
            140,
            .35
        );
}


.tp-card.cat-print .tp-image {

    background:
        rgba(
            255,
            196,
            129,
            .148
        );
}


.tp-card.cat-woodwork .tp-image {

    background:
        rgba(
            195,
            170,
            140,
            .35
        );
}



/* =========================================================
   PRODUCT DETAILS
   ========================================================= */

.tp-details {

    display: flex;

    flex-direction: column;

    align-items: center;

    flex: 1;

    padding:
        20px
        20px
        24px;

    color: inherit;

    text-align: center;

    text-decoration: none;

    cursor: pointer;
}


.tp-details h3 {

    margin:
        0 0 7px;

    color:
        var(--green-dark);

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

    font-size:
        1.45rem;

    font-weight:
        400;

    line-height:
        1.2;
}


.tp-details p {

    margin:
        4px 0;

    color:
        var(--text-soft);

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

    font-size:
        .8rem;

    line-height:
        1.45;
}


.tp-details:hover h3 {

    text-decoration:
        underline;
}


.tp-details:hover .tp-price {

    text-decoration:
        underline;
}


.tp-price {

    display: block;

    margin:
        13px 0 3px;

    color:
        var(--green-dark);

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

    font-size:
        .68rem;

    line-height:
        1.4;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}



/* =========================================================
   FOOTER
   ========================================================= */

footer {

    padding:
        35px 0;

    text-align:
        center;
}


footer p {

    margin:
        0;

    color:
        var(--text-faint);

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

    font-size:
        .6rem;

    letter-spacing:
        .05em;
}



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

@media (max-width: 850px) {

    .tp-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }

}



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

@media (max-width: 600px) {

    .site-header {

        padding:
            25px 0;

    }


    .logo {

        width:
            90px;

        margin-top:
            20px;

    }


    .main-nav {

        flex-direction:
            row;

        flex-wrap:
            wrap;

        justify-content:
            center;

        gap:
            8px;

        margin-top:
            25px;

        margin-bottom:
            35px;

    }


    .main-nav a {

        width:
            82px;

        min-width:
            82px;

        padding:
            10px 0;

        margin:
            0;

        text-align:
            center;

        font-size:
            .6rem;

        letter-spacing:
            .05em;

    }


    .main-nav .nav-letter {

        width:
            80px;

        height:
            80px;

        min-width:
            80px;

        min-height:
            80px;

        margin:
            0 auto 7px;

    }


    .main-nav a span {

        display:
            block;

        width:
            100%;

        margin:
            0;

        padding:
            0;

        text-align:
            center;

    }


    .tp-grid {

        grid-template-columns:
            1fr 1fr;

        gap:
            16px;

    }


    .tp-image {

        padding:
            10px;

    }


    .tp-details {

        padding:
            16px 12px 18px;

    }


    .tp-details h3 {

        font-size:
            1.15rem;

    }


    .tp-details p {

        font-size:
            .7rem;

    }


    .filter-bar {

        gap:
            5px;

    }


    .filter-btn {

        padding:
            7px 9px;

        font-size:
            .55rem;

    }

}



/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .main-nav {

        gap:
            4px;

    }


    .main-nav a {

        width:
            72px;

        min-width:
            72px;

        font-size:
            .47rem;

    }


    .main-nav .nav-letter {

        width:
            64px;

        height:
            64px;

        min-width:
            64px;

        min-height:
            64px;

    }


    .tp-grid {

        gap:
            10px;

    }


    .tp-details h3 {

        font-size:
            1rem;

    }

}

/* =========================================================
   PRODUCT PAGE
   ========================================================= */

.product-page {

    width:
        min(
            900px,
            var(--page-width)
        );

    margin:
        0 auto 80px;

    text-align:
        center;
}


.product-page h1 {

    margin:
        15px 0 8px;

    color:
        var(--green-dark);

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

    font-size:
        clamp(
            2.4rem,
            6vw,
            4rem
        );

    font-weight:
        400;

    line-height:
        1.1;
}


.product-page-subtitle {

    margin:
        0 0 35px;

    color:
        var(--text-soft);

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

    font-size:
        .7rem;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


/* MAIN IMAGE */

.product-main-image {

    width:
        min(
            650px,
            100%
        );

    margin:
        0 auto 25px;

    padding:
        15px;

    background:
        var(--paper-light);

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

    box-shadow:
        0 10px 25px var(--shadow-soft);
}


.product-main-image img {

    display:
        block;

    width:
        100%;

    height:
        auto;
}


/* THUMBNAILS */

.product-gallery {

    width:
        min(
            650px,
            100%
        );

    margin:
        0 auto 45px;

    display:
        grid;

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

    gap:
        12px;
}


.product-gallery img {

    display:
        block;

    width:
        100%;

    aspect-ratio:
        1 / 1;

    object-fit:
        cover;

    padding:
        5px;

    background:
        var(--paper-light);

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

    cursor:
        pointer;
}


/* INFORMATION */

.product-information {

    width:
        min(
            550px,
            100%
        );

    margin:
        0 auto;

    padding:
        30px;

    background:
        var(--panel);

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

    border-radius:
        var(--radius);

    box-shadow:
        0 10px 25px var(--shadow-soft);
}


.product-information h2 {

    margin:
        0 0 15px;

    color:
        var(--green-dark);

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

    font-size:
        2rem;

    font-weight:
        400;
}


.product-information p {

    margin:
        6px 0;

    color:
        var(--text-soft);
}


.product-page-price {

    margin-top:
        20px !important;

    color:
        var(--green-dark) !important;

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

    font-size:
        .9rem;
}


/* SQUARE */

.product-buy-button {

    display:
        inline-block;

    margin-top:
        25px;

    padding:
        12px 22px;

    color:
        var(--paper-light);

    background:
        var(--green-dark);

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

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

    font-size:
        .65rem;

    letter-spacing:
        .08em;

    text-decoration:
        none;

    text-transform:
        uppercase;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.product-buy-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 6px 15px var(--shadow-soft);
}


/* BACK */

.product-back {

    margin-top:
        35px;
}


.product-back a {

    color:
        var(--green-dark);

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

    font-size:
        .65rem;

    text-decoration:
        none;
}


.product-back a:hover {

    text-decoration:
        underline;
}


/* PRODUCT PAGE MOBILE */

@media (max-width: 600px) {

    .product-page {

        margin-bottom:
            50px;

    }


    .product-main-image {

        padding:
            10px;

    }


    .product-gallery {

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap:
            8px;

    }


    .product-information {

        padding:
            25px 20px;

    }

}