/* =========================================
   GENERAL
========================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #f8f6f1;
    color: #302b27;

    font-family: "Montserrat", Arial, sans-serif;

    line-height: 1.7;
}


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

.header {
    position: sticky;
    top: 0;
    z-index: 100;

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

    padding: 18px 7%;

    background: rgba(248, 246, 241, 0.95);

    border-bottom: 1px solid #e4ddd3;

    backdrop-filter: blur(8px);
}


.logo a {
    color: #302b27;

    text-decoration: none;

    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: 32px;
    font-weight: 700;
}


.navigation {
    display: flex;
    gap: 30px;
}


.navigation a {
    color: #514941;

    text-decoration: none;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.14em;
}


.navigation a:hover {
    color: #9a654e;
}


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

.eyebrow {
    margin: 0 0 8px;

    color: #9a654e;

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.2em;
}
.eyebrow2 {
    margin: 0 0 8px;

    color: #9a654e;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.2em;
}

h1,
h2,
h3 {
    margin: 0;

    font-family: "Cormorant Garamond",
                 Georgia,
                 serif;

    line-height: 1.05;
}


h1 {
    font-size: clamp(65px, 8vw, 115px);

    font-weight: 600;
}


h2 {
    font-size: clamp(45px, 5vw, 72px);

    font-weight: 600;
}


h3 {
    font-size: 20px;
}


.button {
    display: inline-block;

    padding: 13px 24px;

    border: 1px solid #54473e;

    color: #3f3630;

    text-decoration: none;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.14em;

    transition: all 0.25s ease;
}


.button:hover {
    background: #3f3630;

    color: white;
}


.button.dark {
    background: #3f3630;

    color: white;
}


.button.dark:hover {
    background: #9a654e;

    border-color: #9a654e;
}


/* =========================================
   HERO
========================================= */

.hero {

    min-height: 85vh;

    padding: 7vw 10vw;

    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 8vw;

    align-items: center;
}


.hero-image {

    position: relative;

    width: 100%;

    max-width: 480px;

  

    background: #e5ddd2;

    box-shadow: 25px 25px 0 #ded3c4;
}


.hero-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}


.hero-content {
    max-width: 650px;
}


.intro-text {

    max-width: 580px;

    margin: 28px 0 32px;

    color: #655d56;

    font-size: 18px;
}


/* =========================================
   INTRODUCTION
========================================= */

.introduction {

    max-width: 900px;

    margin: auto;

    padding: 9vw 8vw;

    text-align: center;
}


.introduction h2 {

    margin-bottom: 25px;
}


.introduction p:not(.eyebrow) {

    max-width: 760px;

    margin: 10px auto;

    color: #665e57;
}


/* =========================================
   PAINTINGS
========================================= */

.paintings {

    padding: 8vw 10vw;

    background: #ffffff;
}


.section-heading {

    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 30px;

    margin-bottom: 50px;
}


.section-heading > p {

    margin: 0;

    color: #756c64;
}


.gallery {

    display: grid;

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

    gap: 55px 25px;
}.gallery2 {

    display: grid;

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

    gap: 55px 25px;
}


.painting-image {

    

    overflow: hidden;

    background: #e8e0d5;
	
}


.painting-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;
	

    transition:
        transform 0.5s ease;
}


.painting:hover
.painting-image img {

    transform: scale(1.04);
}


.painting-info {

    padding-top: 17px;
}


.painting-info h3 {

    margin-bottom: 5px;
}


.painting-info p {

    margin: 0;

    color: #716860;

    font-size: 13px;
}.about-artist-image img{
	max-width: 100%;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
	box-shadow: 25px 25px 0 #ded3c4;
}


/* =========================================
   ABOUT
========================================= */

.about {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 9vw;

    align-items: center;

    padding: 9vw 10vw;
}


.about-content p:not(.eyebrow) {

    max-width: 600px;

    color: #665e57;
	font-size: 13px;
}


.about-image {

    overflow: hidden;

    background: #e7dfd4;
}


.about-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;
}


/* =========================================
   CONTACT
========================================= */

.contact {

    padding: 9vw 10vw;

    text-align: center;

    background: #e8dfd4;
}


.contact h2 {

    margin-bottom: 20px;
}


.contact p:not(.eyebrow) {

    max-width: 650px;

    margin: 0 auto 30px;

    color: #625951;
}


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

footer {

    padding: 25px;

    text-align: center;

    background: #302b27;

    color: #ddd5cc;

    font-size: 11px;
}


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

@media (max-width: 850px) {

    .hero {

        grid-template-columns: 1fr;

        padding: 12vw 8vw;
    }


    .hero-image {

        width: 75%;
    }


    .gallery,
	.gallery2
	{

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


    .about {

        grid-template-columns: 1fr;
    }


    .about-image {

        height: 450px;
    }
	
	
}


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

@media (max-width: 600px) {

    .header {

        padding: 15px 5%;

    }


    .logo a {

        font-size: 25px;

    }


    .navigation {

        gap: 12px;

    }


    .navigation a {

        font-size: 9px;

    }


    .hero {

        padding: 18vw 7vw;

    }


    .hero-image {

        width: 85%;

        box-shadow: 15px 15px 0 #ded3c4;

    }


    h1 {

        font-size: 65px;

    }


    .gallery,
	.gallery2
	{

        grid-template-columns: 1fr;

    }
	.section-heading {

        display: block;

    }


    .section-heading > p {

        margin-top: 12px;

    }


    .paintings,
    .about,
    .contact {

        padding: 18vw 7vw;

    }

}

.painting-image img {
  max-width: 100%;
  height: auto;
  cursor: pointer;
}
/* All images inside the gallery are clickable */
.gallery, 
.gallery2 img {
    cursor: zoom-in;
}

/* Full-screen lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.92);
}

.lightbox[hidden] {
    display: none;
}

/* Enlarged image */
.lightbox img {
    max-width: 95%;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Close button */
.lightbox-close {
    position: absolute;
    top: 15px;
    right: 25px;
    color: white;
    font-size: 42px;
    background: none;
    border: none;
    cursor: pointer;
}