/* =====================
   PROJECT PAGE — shared by all /cards/project-X/ pages
   ===================== */

.project-back{
padding:24px 40px 0;
}

.project-back a{
font-size:13px;
font-weight:600;
letter-spacing:1px;
text-transform:uppercase;
color:var(--text-faint);
text-decoration:none;
font-family:'Bebas Neue', sans-serif;
transition:color 0.2s;
}

.project-back a:hover{
color:var(--text);
}

.project-hero .project-img-placeholder{
width:100%;
aspect-ratio:16/6;
border-radius:0;
border:none;
margin:0;
}

.project-content{
max-width:960px;
margin:0 auto;
padding:0 40px 100px;
}

.modal-header{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:24px;
padding:40px 0 0;
}

.modal-header h2{
font-family:'Bebas Neue', sans-serif;
font-size:64px;
font-weight:700;
letter-spacing:1px;
text-transform:uppercase;
margin:0 0 6px;
line-height:1;
}

.modal-tags{
display:flex;
gap:8px;
flex-wrap:wrap;
justify-content:flex-end;
padding-top:8px;
}

.project-meta{
font-size:13px;
color:var(--text-faint);
letter-spacing:0.5px;
margin:0;
}

.modal-stats{
display:flex;
border-top:1.5px solid var(--border);
border-bottom:1.5px solid var(--border);
margin:32px 0;
}

.modal-stat{
display:flex;
flex-direction:column;
gap:4px;
padding:20px 32px 20px 0;
margin-right:32px;
border-right:1.5px solid var(--border);
}

.modal-stat:last-child{
border-right:none;
}

.modal-stat-value{
font-family:'Bebas Neue', sans-serif;
font-size:28px;
font-weight:400;
letter-spacing:0.5px;
color:var(--accent);
text-transform:uppercase;
}

.modal-stat-label{
font-size:11px;
letter-spacing:1.5px;
text-transform:uppercase;
color:var(--text-faint);
}

.modal-body p{
font-size:16px;
color:var(--text-body);
line-height:1.8;
max-width:680px;
margin:0 0 32px;
}

.modal-body ul{
max-width:680px;
margin:0 0 40px;
padding-left:0;
list-style:none;
display:flex;
flex-direction:column;
gap:12px;
}

.modal-body ul li{
display:flex;
align-items:baseline;
gap:12px;
font-size:15px;
color:var(--text-body);
line-height:1.6;
}

.modal-body ul li::before{
content:'—';
font-weight:700;
color:var(--accent-2);
flex-shrink:0;
}

.modal-images-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
margin:0 0 40px;
}

.modal-images-grid .project-img-placeholder{
margin:0;
border-radius:8px;
border:none;
}

.modal-images-grid .project-img-placeholder:first-child{
grid-column:1 / -1;
aspect-ratio:16/6;
}

@media (max-width:700px){

.project-back{
padding:20px 20px 0;
}

.project-content{
padding:0 20px 60px;
}

.modal-header{
flex-direction:column;
gap:16px;
padding:24px 0 0;
}

.modal-header h2{
font-size:40px;
}

.modal-stats{
flex-wrap:wrap;
}

.modal-stat{
padding:14px 20px 14px 0;
margin-right:20px;
}

.modal-images-grid{
grid-template-columns:1fr;
}

.modal-images-grid .project-img-placeholder:first-child{
grid-column:1;
aspect-ratio:16/9;
}

}