:root{
    --bg:#f8f4ec;
    --bg-alt:#f1ead9;
    --ink:#201c17;
    --ink-soft:#5c554b;
    --line:rgba(32,28,23,0.14);
    --accent:#6b7a4f;
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Geist',sans-serif;
    font-weight:300;
    -webkit-font-smoothing:antialiased;
}

a{
    color:var(--accent);
    text-decoration:none;
}

a:hover{
    color:var(--ink);
}


.img-slot{
    width:100%;
    background:var(--bg-alt);
    border:1px dashed var(--line);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--ink-soft);
    font-size:13px;
    text-align:center;
    overflow:hidden;
}

.img-slot img{
    width:100%;
    height:100%;
    object-fit:cover;
}



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


.announce{
    background:var(--accent);
    color:var(--bg);
    padding:11px 48px;
    display:flex;
    justify-content:center;
    gap:12px;
    font-size:13px;
    border-radius:0 0 16px 16px;
}


header{
    position:sticky;
    top:22px;
    z-index:50;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:22px 48px;
    background:rgba(248,244,236,.8);
    backdrop-filter:blur(10px);
}


.logo{
    font-size:26px;
    font-weight:300;
    color:var(--ink);
}


nav.main-nav{
    display:flex;
    gap:34px;
}


nav.main-nav a{
    font-size:14px;
    color:var(--accent);
}


.menu-btn{
    display:none;
}



/* ========================================
   ARCHIVE PROJECTS
======================================== */


.listing-hero{

    padding:100px 0px 48px;
    max-width:1280px;
    margin:auto;

}


.listing-hero h1{

    font-size:clamp(38px,5vw,64px);
    font-weight:200;
    letter-spacing:-2px;

}


.project-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:44px;

}

.hero-stats {
	display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding-top: 28px;
    max-width: 520px;
}

.project-card{

    background:var(--bg-alt);
    border-radius:24px;
    overflow:hidden;

}


.project-img{

    aspect-ratio:16/11;

}


.project-body{

    padding:28px 30px;

}

.project-top{
	display:flex;
	gap:30px;
	justify-content: space-between;
	align-items:center;
}
/* ========================================
   SINGLE PROJECT HERO
======================================== */


.single-project .post-header{

    max-width:1120px;
    margin:auto;
    padding:80px 0px 40px;

}


.single-project .post-header h1{

    font-size:clamp(32px,4.6vw,52px);
    font-weight:200;
    letter-spacing:-1.5px;

}


.single-project .meta-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;

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

    padding-top:24px;

}



.single-project .meta-grid b{

    display:block;
    font-weight:500;
    font-size:15px;

}


.single-project .meta-grid span{

    font-size:12px;
    text-transform:uppercase;
    color:var(--ink-soft);

}



/* ========================================
   HERO IMAGE FIX
======================================== */


.single-project .cover-wrap{

    max-width:1120px;
    padding:0px;
    margin:auto auto 70px;

}


.single-project .cover-img{

    width:100%;
    aspect-ratio:16/8;
    max-height:620px;

    border-radius:24px;

}


.single-project .cover-img img{

    width:100%;
    height:100%;
    object-fit:cover;

}



/* ========================================
   CONTENT
======================================== */


.single-project .article-section{

    max-width:1120px;
    padding:0 0px 80px;
    margin:auto;

}


.single-project .article-grid{

    display:grid;
    grid-template-columns:220px 1fr;
    gap:64px;

}


.single-project article{

    max-width:680px;

    font-size:17.5px;
    line-height:1.8;

}


.single-project article h2{

    font-size:26px;
    font-weight:200;

    margin:48px 0 16px;

}



/* ========================================
   STACK
======================================== */


.stack-row{

    display:flex;
    flex-wrap:wrap;
    gap:10px;

}


.stack-pill{

    padding:8px 16px;

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

    border-radius:100px;

    background:var(--bg-alt);

    font-size:13px;

}



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


.single-project .gallery-section{

    max-width:1120px;

    padding:0 0px 100px;

    margin:auto;

}


.gallery-grid{

    display:grid;
    grid-template-columns:1.4fr 1fr;
    gap:24px;

}


.gallery-grid .img-slot{

    aspect-ratio:4/3;
    border-radius:18px;

}


.gallery-grid .g-tall{

    grid-row:span 2;

}



/* ========================================
   RESULTS
======================================== */


.results-section{

    max-width:1120px;

    padding:0 48px 100px;

    margin:auto;

}


.results-box{

    background:var(--ink);

    color:var(--bg);

    padding:56px 48px;

    border-radius:24px;

}


.results-grid{

    display:grid;

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

    gap:32px;

}


.results-grid .num{

    font-size:44px;
    color:var(--accent);

}



/* ========================================
   RELATED PROJECTS FIX
======================================== */


.related-section{

    max-width:1280px;

    padding:0 48px 120px;

    margin:auto;

}


.related-grid{

    display:grid;

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

    gap:32px;

}



.post-card{

    display:flex;

    flex-direction:column;

    gap:16px;

    padding:14px;

    border-radius:20px;

    background:transparent;

    transition:.3s ease;

}



.post-card:hover{

    transform:translateY(-8px);

    background:var(--bg-alt);

}



.post-img{

    aspect-ratio:4/3;

    border-radius:16px;

}


.post-img img{

    object-fit:cover;

}



.post-meta{

    color:var(--accent);

    text-transform:uppercase;

    font-size:12px;

    letter-spacing:.5px;

}


.post-card h3{

    margin:8px 0;

    font-size:20px;

    font-weight:500;

}


.post-card p{

    color:var(--ink-soft);

    font-size:14px;

}



/* ========================================
   CTA
======================================== */


.cta-section{padding:0 48px 120px;max-width:1280px;margin:0 auto;}
  .cta-box{background:var(--ink);color:var(--bg);border-radius:24px;padding:64px 48px;text-align:center;}
  .cta-box h2{font-family:'Geist',sans-serif;font-weight:200;font-size:clamp(28px,3.6vw,42px);letter-spacing:-1px;margin:0 0 18px;}
  .cta-box h2 span{font-style:italic;color:var(--accent);}
  .cta-box p{font-size:16px;color:rgba(248,244,236,.72);margin:0 0 32px;font-weight:300;}
  .cta-box a{display:inline-block;padding:15px 28px;background:var(--accent);color:var(--bg);border-radius:100px;font-size:15px;font-weight:500;transition:opacity .25s ease;}
  .cta-box a:hover{opacity:.85;color:var(--bg);}
/* ========================================
   RESPONSIVE
======================================== */


@media(max-width:1024px){

    .single-project .article-grid{

        grid-template-columns:1fr;

    }


    .single-project .meta-grid{

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

    }


    .related-grid{

        grid-template-columns:1fr 1fr;

    }


}

@media(max-width:680px){


    header,
    .single-project .post-header,
    .single-project .cover-wrap,
    .single-project .article-section,
    .gallery-section,
    .results-section,
    .related-section,
    .cta-section{

        padding-left:20px;
        padding-right:20px;

    }


    .menu-btn{

        display:block;

    }


    .single-project .cover-img{

        aspect-ratio:4/3;
        max-height:none;

    }


    .related-grid,
    .results-grid{

        grid-template-columns:1fr;

    }


}

/* ========================================
   SINGLE PROJECT FINAL FIXES
======================================== */


/* Prevent horizontal overflow */
html,
body{
    overflow-x:hidden;
}


/* ========================================
   TESTIMONIAL
======================================== */


.single-project .testimonial-section{

    max-width:900px;

    margin:0 auto;

    padding:0 48px 100px;

    text-align:center;

}


.single-project .testimonial-section blockquote{

    margin:0 auto 24px;

    max-width:850px;

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

    font-size:clamp(22px,2.6vw,30px);

    line-height:1.5;

    font-weight:200;

    font-style:italic;

    letter-spacing:-.4px;

    color:var(--ink);

}


.single-project .testimonial-author{

    font-size:14px;

    font-weight:500;

    color:var(--ink);

}


.single-project .testimonial-author span{

    display:block;

    margin-top:4px;

    font-size:13px;

    font-weight:300;

    color:var(--ink-soft);

}



/* ========================================
   RELATED PROJECTS
======================================== */


.single-project .related-section{

    max-width:1280px;

    margin:0 auto;

    padding:0 48px 120px;

}


.single-project .related-section .eyebrow{

    margin-bottom:16px;

}


.single-project .related-section h2{

    font-size:clamp(26px,3vw,36px);

    font-weight:200;

    letter-spacing:-1px;

    margin:0 0 40px;

}



.single-project .related-grid{

    display:grid;

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

    gap:32px;

}



.single-project .post-card{

    display:flex;

    flex-direction:column;

    gap:16px;

    padding:14px;

    border-radius:20px;

    color:inherit;

    background:transparent;

}


.single-project .post-card:hover{

    background:var(--bg-alt);

    transform:translateY(-8px);

}



.single-project .post-img{

    width:100%;

    aspect-ratio:4/3;

    border-radius:16px;

    overflow:hidden;

}


.single-project .post-img img{

    width:100%;

    height:100%;

    object-fit:cover;

}



.single-project .post-card h3{

    font-size:18px;

    line-height:1.4;

    font-weight:500;

    margin:0 0 8px;

}


.single-project .post-card p{

    font-size:14px;

    line-height:1.6;

    color:var(--ink-soft);

}



/* ========================================
   CTA MATCH OTHER PAGES
======================================== */


.single-project .cta-section{

    max-width:1280px;

    margin:0 auto;

    padding:0 48px 120px;

}


.single-project .cta-box{

    background:var(--bg-alt);

    border-radius:24px;

    padding:64px 48px;

    text-align:center;

}



.single-project .cta-box h2{

    max-width:700px;

    margin:0 auto 18px;

    font-size:clamp(28px,3.6vw,42px);

    font-weight:200;

    letter-spacing:-1px;

}


.single-project .cta-box h2 span{

    color:var(--accent);

    font-style:italic;

}


.single-project .cta-box p{

    max-width:600px;

    margin:0 auto 32px;

    font-size:16px;

    color:var(--ink-soft);

}



.single-project .cta-box a{

    display:inline-block;

    padding:15px 28px;

    background:var(--ink);

    color:var(--bg);

    border-radius:100px;

    font-size:15px;

    font-weight:500;

}



.single-project .cta-box a:hover{

    background:var(--accent);

    color:var(--bg);

}

.toc-nav {
	display:flex;
	flex-direction:column;
}

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


@media(max-width:1024px){


    .single-project .related-grid{

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

    }


}



@media(max-width:680px){


    .single-project .testimonial-section,
    .single-project .related-section,
    .single-project .cta-section{

        padding-left:20px;

        padding-right:20px;

    }


    .single-project .related-grid{

        grid-template-columns:1fr;

    }


    .single-project .cta-box{

        padding:40px 24px;

    }


}
/* ========================================
   SINGLE PROJECT CTA MATCH GLOBAL CTA
======================================== */


.single-project .cta-section{

    max-width:1280px;

    margin:0 auto;

    padding:0 48px 120px;

}


.single-project .cta-box{

    background:var(--ink);

    color:var(--bg);

    border-radius:24px;

    padding:64px 48px;

    text-align:center;

}



.single-project .cta-box h2{

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

    font-weight:200;

    font-size:clamp(28px,3.6vw,42px);

    letter-spacing:-1px;

    margin:0 0 18px;

    color:var(--bg);

}


.single-project .cta-box h2 span{

    color:var(--accent);

    font-style:italic;

}



.single-project .cta-box p{

    font-size:16px;

    color:rgba(248,244,236,.72);

    max-width:600px;

    margin:0 auto 32px;

    line-height:1.6;

}



.single-project .cta-box a{

    display:inline-block;

    padding:15px 28px;

    background:var(--accent);

    color:var(--bg);

    border-radius:100px;

    font-size:15px;

    font-weight:500;

    transition:opacity .25s ease;

}



.single-project .cta-box a:hover{

    opacity:.85;

    color:var(--bg);

}


@media(max-width:680px){

    .single-project .cta-section{

        padding-left:20px;

        padding-right:20px;

    }


    .single-project .cta-box{

        padding:40px 24px;

    }

}
/* Center CTA title and text */

.single-project .cta-box h2,
.single-project .cta-box p{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}