/* ===================================
   MARZA'S ART
   Version 1.0
=================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;

    background:#FAF8F5;

    color:#2f2f2f;

    line-height:1.7;

}

/* -------------------------
   Header
--------------------------*/

header{

    position:sticky;
    top:0;

    background:rgba(250,248,245,.95);

    backdrop-filter:blur(8px);

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 8%;

    border-bottom:1px solid #e6ddd5;

    z-index:1000;

}

.logo{

    font-family:'Cormorant Garamond',serif;

    font-size:2rem;

    font-weight:700;

    letter-spacing:1px;

}

nav{

    display:flex;

    gap:30px;

}

nav a{

    color:#444;

    text-decoration:none;

    font-weight:500;

    transition:.3s;

}

nav a:hover{

    color:#8c6b52;

}

/* -------------------------
   Hero
--------------------------*/

.hero{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

    max-width:1400px;

    margin:auto;

    min-height:90vh;

    padding:80px 8%;

}

.subtitle{

    text-transform:uppercase;

    letter-spacing:3px;

    color:#8c6b52;

    margin-bottom:18px;

    font-size:.9rem;

}

.hero h1{

    font-family:'Cormorant Garamond',serif;

    font-size:5rem;

    line-height:1;

    margin-bottom:30px;

    font-weight:600;

}

.intro{

    max-width:480px;

    margin-bottom:40px;

    color:#666;

}

.button{

    display:inline-block;

    background:#8c6b52;

    color:white;

    padding:16px 34px;

    border-radius:50px;

    text-decoration:none;

    transition:.3s;

}

.button:hover{

    background:#71523e;

    transform:translateY(-2px);

}

.hero-image img{

    width:100%;

    border-radius:12px;

    box-shadow:0 25px 60px rgba(0,0,0,.18);

}

/* -------------------------
   Sections
--------------------------*/

section{

    padding:120px 8%;

}

section h2{

    font-family:'Cormorant Garamond',serif;

    font-size:3rem;

    margin-bottom:50px;

    text-align:center;

}

/* -------------------------
   About
--------------------------*/

.about{

    display:grid;

    grid-template-columns:350px 1fr;

    gap:80px;

    align-items:center;

    max-width:1200px;

    margin:auto;

}

.about img{

    width:100%;

    border-radius:12px;

    box-shadow:0 15px 40px rgba(0,0,0,.12);

}

.about-text p{

    margin-bottom:20px;

    color:#555;

}

/* -------------------------
   Gallery
--------------------------*/

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:35px;

    max-width:1400px;

    margin:auto;

}

.painting-card{

    background:white;

    border-radius:12px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

}

.painting-card:hover{

    transform:translateY(-10px);

}

.painting-card h3{

    padding:20px 20px 8px;

    font-family:'Cormorant Garamond',serif;

    font-size:1.7rem;

}

.painting-card p{

    padding:0 20px 20px;

    color:#777;

}

/* -------------------------
   Timeline
--------------------------*/

.timeline{

    max-width:900px;

    margin:auto;

}

.event{

    background:white;

    padding:35px;

    border-left:5px solid #8c6b52;

    margin-bottom:30px;

    border-radius:10px;

    box-shadow:0 10px 25px rgba(0,0,0,.06);

}

.event h3{

    font-size:2rem;

    font-family:'Cormorant Garamond',serif;

    margin-bottom:10px;

}

/* -------------------------
   Contact
--------------------------*/

.contact{

    text-align:center;

}

.contact p{

    max-width:600px;

    margin:auto auto 40px;

    color:#666;

}

/* -------------------------
   Footer
--------------------------*/

footer{

    padding:50px;

    text-align:center;

    color:#777;

    border-top:1px solid #e8dfd7;

}

/* -------------------------
   Responsive
--------------------------*/

@media (max-width:900px){

.hero{

    grid-template-columns:1fr;

    text-align:center;

}

.hero h1{

    font-size:3.5rem;

}

.intro{

    margin-left:auto;

    margin-right:auto;

}

.about{

    grid-template-columns:1fr;

    text-align:center;

}

nav{

    gap:15px;

    font-size:.9rem;

}

header{

    flex-direction:column;

    gap:15px;

}

}

/* ===================================
   JavaScript effects
=================================== */

section{

    opacity:1;

    transform:none;

}

nav a.active{

    color:#8c6b52;

    font-weight:600;

}

.painting-card img{

    width:100%;

    aspect-ratio:4/5;

    object-fit:cover;

    display:block;

}

.painting-info{

    padding:20px;

}

.status{

    display:inline-block;

    margin-top:10px;

    padding:6px 12px;

    border-radius:20px;

    background:#d8ece0;

    color:#2d6a4f;

    font-size:.85rem;

    font-weight:600;

}

.exhibition-image{
    display:block;
    width:100%;
    height:auto;
    margin-top:24px;
    border-radius:8px;
    box-shadow:0 8px 22px rgba(0,0,0,.10);
}

/* Gallery interaction and painting details */

.gallery-status{ text-align:center; color:#666; margin:-25px auto 45px; }
.gallery-status.error{ color:#8a3d35; }

.painting-card{ display:flex; flex-direction:column; }
.painting-image-button{
    display:block; width:100%; padding:0; border:0;
    background:#f0ebe5; color:inherit; cursor:pointer;
}
.painting-image-button:focus-visible,
.details-button:focus-visible,
.close:focus-visible,
.button:focus-visible,
nav a:focus-visible{ outline:3px solid #8c6b52; outline-offset:3px; }

.painting-image-wrapper{
    width:100%; aspect-ratio:4/5; display:flex;
    align-items:center; justify-content:center; overflow:hidden;
}
.painting-image-wrapper img{
    width:100%; height:100%; aspect-ratio:auto;
    object-fit:contain; display:block;
}
.painting-info{
    display:flex; flex:1; flex-direction:column;
    align-items:flex-start; padding:20px;
}
.painting-card h3{ padding:16px 0 4px; }
.painting-card .painting-summary{ padding:0 0 18px; }
.details-button{
    margin-top:auto; padding:0; border:0; background:none;
    color:#71523e; font:inherit; font-weight:600; cursor:pointer;
}
.details-button:hover{ text-decoration:underline; }

.missing-image{
    min-height:280px;
    background:linear-gradient(145deg,#eee8e1,#f8f5f1);
    color:#8c6b52;
}
.missing-image > span{
    display:flex; flex-direction:column; align-items:center; gap:10px;
}
.missing-image span[aria-hidden="true"]{
    font-family:'Cormorant Garamond',serif; font-size:3rem;
}
.missing-image small{ color:#74685f; letter-spacing:.05em; }
.status-sold,.status-given{ background:#eee8e1; color:#665c54; }

body.modal-open{ overflow:hidden; }
.modal{
    position:fixed; inset:0; z-index:2000; display:none;
    padding:40px; overflow-y:auto; background:rgba(30,25,22,.82);
}
.modal.open{
    display:flex; align-items:flex-start; justify-content:center;
}
.modal-content{
    position:relative; width:min(1200px,100%);
    min-height:min(760px,calc(100vh - 80px));
    margin:auto; padding:64px 40px 40px; border-radius:14px;
    background:#FAF8F5; box-shadow:0 25px 80px rgba(0,0,0,.35);
}
.close{
    position:absolute; top:14px; right:20px; width:44px; height:44px;
    border:0; border-radius:50%; background:transparent; color:#2f2f2f;
    font-size:2.2rem; line-height:1; cursor:pointer;
}
.close:hover{ background:#eee8e1; }
#modalBody{
    display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,.75fr);
    gap:45px; align-items:start;
}
.modal-image-wrapper{
    display:flex; align-items:center; justify-content:center;
    min-height:420px; max-height:calc(100vh - 160px); overflow:hidden;
}
.modal-image{
    display:block; width:auto; max-width:100%; height:auto;
    max-height:calc(100vh - 160px); object-fit:contain;
}
.modal-details h2{
    margin-bottom:24px; font-family:'Cormorant Garamond',serif;
    font-size:3rem; line-height:1.05;
}
.modal-details dl{
    display:grid; grid-template-columns:max-content 1fr;
    gap:7px 18px; margin-bottom:28px;
}
.modal-details dt{ font-weight:600; }
.modal-details dd{ color:#666; }
.modal-details p{ margin-top:16px; color:#555; }

@media (max-width:900px){
    #modalBody{ grid-template-columns:1fr; }
    .modal-image-wrapper{ min-height:260px; max-height:none; }
    .modal-image{ max-height:70vh; }
}

@media (max-width:600px){
    header{ position:relative; padding:16px 5%; }
    nav{ width:100%; gap:8px 18px; justify-content:center; flex-wrap:wrap; }
    section{ padding:75px 6%; }
    .hero{ min-height:auto; padding-top:55px; }
    .gallery-grid{ grid-template-columns:1fr; }
    .modal{ padding:0; }
    .modal-content{ min-height:100vh; padding:65px 20px 35px; border-radius:0; }
    .modal-details h2{ font-size:2.4rem; }
}