/* ===== Zac Abney Portfolio — main page ===== */
:root{
    --bg:#f6f1e8;
    --surface:#ffffff;
    --ink:#2b2018;
    --muted:#7a6a5c;
    --line:rgba(60,40,25,.14);
    --accent-a:#c99a6b;
    --accent-b:#6b4226;
    --grad:linear-gradient(135deg,var(--accent-a),var(--accent-b));
    --radius:1.75rem;
    --shadow:0 18px 45px rgba(60,40,25,.14);
    --gutter:clamp(1rem,5vw,3rem);
}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',system-ui,sans-serif;text-decoration:none;list-style:none}
html{scroll-behavior:smooth;scroll-padding-top:5.5rem;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);overflow-x:hidden;line-height:1.5}
img,video{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent-b);outline-offset:3px}

/* ----- Header ----- */
.header{
    position:fixed;top:1rem;left:50%;transform:translateX(-50%);
    display:flex;align-items:center;justify-content:space-between;gap:clamp(1rem,3vw,3rem);
    width:min(960px,calc(100% - 1.5rem));
    background:rgba(43,32,24,.80);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    color:#fff;padding:.5rem .6rem .5rem 1.4rem;border-radius:3rem;z-index:1000;
    box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.logo{color:#fff;font-size:1.15rem;font-weight:600;white-space:nowrap;transition:.3s ease}
.logo:hover{transform:scale(1.05)}
.nav-links{display:flex;gap:.25rem;margin-left:auto}
.nav-links li a{
    display:block;position:relative;color:#fff;font-weight:300;padding:.45rem .9rem;border-radius:2rem;transition:background .2s;
}
.nav-links li a:hover{background:rgba(255,255,255,.14)}
.visit-btn{
    display:inline-flex;align-items:center;justify-content:center;padding:.65rem 1.3rem;border-radius:3rem;
    font-weight:500;font-size:.95rem;color:#fff;white-space:nowrap;transition:.3s ease;background:var(--grad);
}
.visit-btn:hover{transform:scale(1.04)}
#menu-icon{
    display:none;background:none;border:0;color:#fff;font-size:1.4rem;cursor:pointer;
    width:2.75rem;height:2.75rem;border-radius:50%;
}

/* ----- Layout ----- */
section{padding:clamp(4rem,9vw,7rem) var(--gutter);width:100%;position:relative}
.section-title{
    text-align:center;font-size:clamp(2rem,6vw,3.5rem);font-weight:600;line-height:1.1;margin-bottom:clamp(1.5rem,4vw,2.5rem);
}
.section-title::after{content:"";display:block;width:64px;height:5px;border-radius:5px;background:var(--grad);margin:.9rem auto 0}

/* ----- About ----- */
.about{min-height:100svh;display:flex;align-items:center;justify-content:center;padding-top:7rem}
.about-container{display:flex;align-items:center;justify-content:center;gap:clamp(2rem,6vw,5rem);max-width:1100px;width:100%}
.about img{width:min(32vw,380px);aspect-ratio:1;object-fit:cover;border-radius:20%;box-shadow:var(--shadow)}
.info-box{display:flex;flex-direction:column;text-align:center;align-items:center;gap:1.4rem}
.info-box h3{font-size:clamp(1.1rem,2.5vw,1.6rem);font-weight:500;opacity:.75}
.info-box h1{font-size:clamp(2.5rem,7vw,4.2rem);font-weight:600;line-height:1.05}
.info-box span.tagline,.info-box .text span{
    background:linear-gradient(135deg,#a8744a,#5a3720);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:clamp(1.2rem,3vw,2rem);
}
.btn-group{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem}
.btn{
    display:inline-flex;align-items:center;justify-content:center;border-radius:3rem;padding:.65rem 1.5rem;
    border:2px solid var(--ink);font-weight:500;white-space:nowrap;transition:.2s ease-in-out;background:transparent;cursor:pointer;
}
.btn a{color:inherit}
.btn:hover{background:var(--ink);color:#fff}
.btn-group .btn:first-child{background:var(--ink);color:#fff}
.btn-group .btn:first-child:hover{background:transparent;color:var(--ink)}
.socials{display:flex;gap:1.5rem}
.bio{max-width:34rem;font-size:clamp(.95rem,2.4vw,1.05rem);line-height:1.7;color:var(--muted);text-align:center;margin-top:.4rem;padding-top:1.4rem;position:relative}
.bio::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:48px;height:3px;border-radius:3px;background:var(--grad)}
.bio strong{color:var(--ink);font-weight:600}
.socials a{color:var(--ink)}
.socials i{font-size:2.2rem;transition:.2s ease-in-out}
.socials a:hover i{transform:scale(1.12);color:var(--accent-b)}

/* ----- Galleries (paintings / landscapes / murals) ----- */
.paintings,.in-progress,.murals{padding-top:clamp(2.5rem,6vw,4rem);padding-bottom:clamp(2.5rem,6vw,4rem)}
.paintings{padding-top:clamp(3rem,7vw,5rem)}
.featured-painting-wrap{width:min(900px,100%);margin:0 auto clamp(1.25rem,3vw,2rem)}
.featured-painting{
    position:relative;width:100%;height:clamp(260px,62vw,560px);border-radius:var(--radius);
    border:1px solid var(--line);overflow:hidden;background:#ece7de no-repeat center/contain;box-shadow:var(--shadow);
    transition:background-image .25s;
}
.featured-label{
    position:absolute;left:1rem;bottom:1rem;font-size:.8rem;font-weight:600;letter-spacing:.08rem;text-transform:uppercase;
    color:#fff;background:rgba(43,32,24,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:.35rem .9rem;border-radius:2rem;
}
.painting-info{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:clamp(.8rem,2vw,1.5rem);
    width:min(1200px,100%);margin:0 auto;
}
.painting-item{display:flex;flex-direction:column;gap:.6rem}
.painting-item .grid-card{
    aspect-ratio:4/5;min-height:0;border-radius:1.25rem;border:2px solid transparent;cursor:pointer;
    background:#ece7de center/cover no-repeat;box-shadow:0 8px 22px rgba(60,40,25,.16);
    transition:transform .25s ease,box-shadow .25s ease,border-color .25s;
}
.painting-item .grid-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.painting-item .grid-card.is-active{border-color:var(--accent-b);box-shadow:0 0 0 3px rgba(107,66,38,.22),var(--shadow)}
.card-caption{text-align:center}
.card-caption span{font-size:.8rem;font-weight:600;letter-spacing:.08rem;text-transform:uppercase;color:var(--muted)}
.painting-button{display:flex;justify-content:center;margin-top:2rem}

/* ----- Projects ----- */
.projects{min-height:0;display:flex;flex-direction:column;align-items:center;gap:2rem}
.project-info{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:clamp(1rem,2.5vw,1.75rem);
    width:min(1200px,100%);align-items:stretch;
}
.project-info .grid-card{
    position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;gap:.6rem;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.75rem 1.5rem;
    box-shadow:0 8px 24px rgba(60,40,25,.09);transition:.3s ease;cursor:pointer;
}
.project-info .grid-card:hover{transform:translateY(-6px);background:#2b2018;color:#fff;box-shadow:var(--shadow)}
.project-info .grid-card img{
    width:clamp(96px,22vw,150px);aspect-ratio:1;border-radius:50%;object-fit:cover;display:block;margin:0 auto .75rem;
}
.project-info .grid-card span{
    font-size:.85rem;font-weight:500;background:linear-gradient(135deg,#a8744a,#5a3720);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.project-info .grid-card h3{font-size:1.35rem;line-height:1.2}
.project-info .grid-card p{font-size:.92rem;opacity:.8;flex:1}
.project-info .btn{margin-top:.5rem;align-self:flex-start}
.project-info .btn a::after{content:"";position:absolute;inset:0}   /* whole card is clickable */
.project-info .grid-card:hover span{background:linear-gradient(135deg,#e2b98f,#c99a6b);-webkit-background-clip:text;background-clip:text}
.project-info .grid-card:hover .btn{background:#fff;color:#2b2018;border-color:#fff}

/* ----- Contact ----- */
.contact{min-height:0}
.contact-info{display:flex;justify-content:center}
.contact1{
    width:min(520px,100%);text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    padding:2rem 1.5rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.35rem;
}
.contact1 h3{font-size:.8rem;letter-spacing:.1rem;text-transform:uppercase;color:var(--muted);margin-top:.8rem}
.contact1 p a{font-size:clamp(1.05rem,4vw,1.4rem);font-weight:500;word-break:break-word}
.contact1 p a:hover{color:var(--accent-b)}
.contact1 .contact-label{
    background:linear-gradient(135deg,#a8744a,#5a3720);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:1.3rem;font-weight:600;
}

/* ----- Responsive ----- */
@media (max-width:900px){
    .header{top:.5rem;padding:.4rem .4rem .4rem 1.1rem;border-radius:1.6rem}
    .logo{font-size:1rem}
    #menu-icon{display:block;margin-left:auto}
    .visit-btn{display:none}
    .nav-links{
        display:none;position:absolute;top:calc(100% + .5rem);left:0;right:0;flex-direction:column;align-items:stretch;gap:.2rem;
        padding:.7rem;background:rgba(43,32,24,.97);border:1px solid rgba(255,255,255,.12);border-radius:1.4rem;margin:0;
    }
    .header.nav-open .nav-links{display:flex}
    .nav-links li a{padding:.8rem 1rem;text-align:center}
    .about{padding-top:6.5rem}
    .about-container{flex-direction:column}
    .about img{width:min(260px,65vw)}
}
@media (max-width:520px){
    .painting-info{grid-template-columns:repeat(2,1fr)}
    .painting-item .grid-card{border-radius:1rem}
    .btn-group{flex-direction:column;align-items:stretch;width:min(260px,100%)}
    .featured-painting{border-radius:1.25rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}