* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #fafafa;
    color: #111;
    font-family: "Montserrat", sans-serif;
}


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

/* INDEX HEADER — same as Contact */
.topbar {
    height: 82px;
    background: linear-gradient(
        to bottom,
        #ffffff 0%,
        #fcfbf8 100%
    );
    border-bottom: 1px solid #e8e3dc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 7%;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 3px 14px rgba(32, 43, 61, 0.08);
}

.topbar .brand img {
    height: 52px;
    width: auto;
    display: block;
}

.topbar nav {
    display: flex;
    align-items: center;
    gap: 34px;
}

.topbar nav a {
    position: relative;
    color: #263449;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 2px;
    transition: color 0.25s ease;
}

.topbar nav a:hover {
    color: #a64b35;
}

.topbar nav a.active {
    color: #a64b35;
}

.topbar nav a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: #a64b35;
    border-radius: 2px;
}


/* =========================================
   GALLERY
========================================= */

.gallery {
    max-width: 1245px;

    margin: 20px auto 70px;

    display: grid;

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

    gap: 64px 24px;

    padding: 0;
}


.card {
    background: #fff;

    border: 1px solid #ddd;

    border-radius: 9px;

    padding: 10px;

    overflow: hidden;

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


.card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 7px 22px rgba(0,0,0,.08);
}


.art-wrap {
    height: 351px;

    display: flex;

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

    background: #f5f5f5;

    overflow: hidden;
}


.art-wrap img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.title-row {
    display: flex;

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

    margin-top: 14px;
}


h2 {
    font-size: 16px;
    font-weight: 400;

    margin: 0;
}


button {
    border: 0;

    background: transparent;

    font-size: 26px;

    line-height: 1;

    cursor: pointer;

    padding: 0 1px;

    color: #111;
}


.artist {
    display: inline-block;

    margin-top: 18px;

    color: #9a6a50;

    font-size: 14px;

    text-decoration: underline;
}


.details {
    margin-top: 15px;

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    color: #53708c;

    font-size: 13px;

    line-height: 1.65;
}


.details strong {
    color: #111;

    font-size: 14px;

    font-weight: 500;

    white-space: nowrap;
}


.placeholder-art {
    height: 351px;

    background:
        linear-gradient(
            135deg,
            #d9d0bd,
            #f0ece4 45%,
            #6e6b62
        );

    display: grid;

    place-items: center;

    color: #fff;

    letter-spacing: 4px;

    font-family: Georgia, serif;

    font-size: 20px;
}


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

.site-footer {
    background: #202b3d;

    color: #ffffff;

    margin-top: 50px;
}


.footer-container {
    max-width: 1150px;

    margin: auto;

    padding: 32px 25px 25px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;
}


/* LEFT */

.footer-brand {
    max-width: 430px;
}


.footer-brand p {
    margin: 0 0 12px;

    color: #cbd0d8;

    font-size: 13px;

    line-height: 1.6;
}


.footer-tagline {
    color: #d89a78 !important;

    font-family: Georgia, serif;

    font-size: 14px !important;

    font-style: italic;
}


/* RIGHT */

.footer-container .footer-column:last-child {
    justify-self: end;

    width: 300px;
}


.footer-column h3 {
    margin: 0 0 18px;

    color: #ffffff;

    font-family: Georgia, serif;

    font-size: 18px;

    font-weight: 500;
}


.footer-column p {
    margin: 0 0 10px;

    color: #cbd0d8;

    font-size: 13px;

    line-height: 1.5;
}


/* =========================================
   GET IN TOUCH
========================================= */

.get-in-touch {
    justify-self: end;

    width: 100%;

    text-align: right;
}


.get-in-touch h3 {
    margin: 0 0 20px;

    font-family: Georgia, serif;

    font-size: 18px;

    font-weight: 500;

    color: #ffffff;
}


.contact-details {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 14px;

    white-space: nowrap;
}


.contact-details p {
    margin: 0;

    color: #cbd0d8;

    font-size: 13px;
}


.contact-details a {
    color: #cbd0d8;

    text-decoration: none;

    font-size: 13px;
}


.contact-details a:hover {
    color: #ffffff;
}


.contact-details span {
    color: #87909d;

    font-size: 13px;
}


/* =========================================
   BOTTOM BAR
========================================= */

.footer-bottom {
    max-width: 1150px;

    margin: auto;

    padding: 14px 25px;

    border-top: 1px solid rgba(255,255,255,.12);

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.footer-bottom p {
    margin: 0;

    color: #9da5b0;

    font-size: 11px;
}


.footer-bottom-links {
    display: flex;

    gap: 20px;
}


.footer-bottom-links a {
    color: #9da5b0;

    font-size: 11px;

    text-decoration: none;
}


.footer-bottom-links a:hover {
    color: #ffffff;
}


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

@media (max-width: 900px) {

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

        padding: 0 16px;
    }

    .topbar {
        padding: 0 20px;
    }

    .contact-details {
        flex-wrap: wrap;

        justify-content: flex-end;

        white-space: normal;
    }
}


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

@media (max-width: 700px) {

    .footer-container {
        padding: 30px 25px 22px;

        grid-template-columns: 1fr;

        gap: 25px;
    }

    .footer-container .footer-column:last-child {
        justify-self: start;

        width: auto;

        text-align: left;
    }

    .get-in-touch {
        text-align: left;
    }

    .contact-details {
        justify-content: flex-start;
    }

    .footer-bottom {
        flex-direction: column;

        gap: 10px;

        text-align: center;
    }
}


@media (max-width: 600px) {

   .topbar {
        height: auto;
        padding: 16px 20px;
        align-items: flex-start;
        gap: 12px;
        flex-direction: column;
    }

    .topbar .brand img {
        height: 48px;
    }

    .topbar nav {
        gap: 15px;
        flex-wrap: wrap;
    }

    .topbar nav a {
        font-size: 12px;
    }

    .gallery {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .art-wrap,
    .placeholder-art {
        height: 390px;
    }
}