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

body{
background:#050505;
font-family:'Cormorant Garamond',serif;
color:#f1d08a;
overflow:hidden;
}

/* =========================
   BACKGROUND SEQUENCE
========================= */

.background-sequence{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-2;
overflow:hidden;
-webkit-transform:translateZ(0);
transform:translateZ(0);
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
will-change:transform;
}

.background-sequence img{
width:100%;
height:100%;
object-fit:cover;
-webkit-transform:translateZ(0);
transform:translateZ(0);
}

.overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.3));
z-index:-1;
-webkit-transform:translateZ(0);
transform:translateZ(0);
}

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

.archive-header{
position:fixed;
top:0;
left:0;
width:100%;
padding:40px 60px;
display:flex;
justify-content:space-between;
align-items:center;
z-index:100;
}

.archive-header h1{
font-family:'Cinzel',serif;
letter-spacing:5px;
font-size:1.8rem;
font-weight:500;
}

.home-link{
display:flex;
align-items:center;
gap:15px;
text-decoration:none;
color:#f1d08a;
transition:.3s ease;
}

.home-link:hover{
color:#ffcf7a;
}

.home-link img{
width:60px;
transition:transform .3s ease, filter .3s ease;
}

.home-link:hover img{
transform:scale(1.05);
filter:drop-shadow(0 0 10px rgba(255,180,70,.3));
}

/* =========================
   CAROUSEL
========================= */

.carousel-wrapper{
width:100vw;
height:100vh;
overflow:hidden;
position:relative;
}

.carousel-track{
position:relative;
width:100%;
height:100%;
}

/* =========================
   PROJECT CARD
========================= */

.project-card{
position:absolute;
top:30%;
left:50%;
width:200px;
text-decoration:none;
color:#f1d08a;
text-align:center;
opacity:0;
pointer-events:none;
transition:
transform 1s cubic-bezier(.19,1,.22,1),
opacity 1s cubic-bezier(.19,1,.22,1),
left 1s cubic-bezier(.19,1,.22,1);
}

.project-card img{
width:100%;
height:285px;
object-fit:cover;
border:1px solid rgba(255,180,70,.20);
transition:transform .8s ease, border-color .8s ease;
}

.project-card h2{
margin-top:22px;
font-family:'Cinzel',serif;
font-size:1.1rem;
letter-spacing:4px;
transition:letter-spacing .8s ease, opacity .8s ease;
}

/* =========================
   CENTER
========================= */

.center{
left:50%;
transform:translate(-50%,-50%) scale(1.04);
opacity:1;
z-index:10;
pointer-events:auto;
filter:drop-shadow(0 0 18px rgba(255,180,70,.22));
}

.project-card.center img{
transform:scale(1.02);
border-color:rgba(255,180,70,.55);
}

.project-card.center h2{
letter-spacing:5px;
}

/* =========================
   LEFT
========================= */

.left{
left:25%;
transform:translate(-50%,-50%) scale(.80);
opacity:.45;
z-index:5;
}

/* =========================
   RIGHT
========================= */

.right{
left:75%;
transform:translate(-50%,-50%) scale(.80);
opacity:.45;
z-index:5;
}

/* =========================
   FAR LEFT
========================= */

.far-left{
left:-10%;
transform:translate(-50%,-50%) scale(.65);
opacity:0;
z-index:1;
}

/* =========================
   FAR RIGHT
========================= */

.far-right{
left:110%;
transform:translate(-50%,-50%) scale(.65);
opacity:0;
z-index:1;
}

/* =========================
   CENTER HOVER
========================= */

.project-card.center:hover{
filter:drop-shadow(0 0 25px rgba(255,180,70,.30));
}

.project-card.center:hover img{
transform:scale(1.04);
}

/* =========================
   RESPONSIVE — 1200px
========================= */

@media (max-width:1200px){

.archive-header{
padding:30px 40px;
}

.project-card{
width:280px;
}

.project-card img{
height:400px;
}

.left{
left:20%;
}

.right{
left:80%;
}

}

/* =========================
   RESPONSIVE — 900px
========================= */

@media (max-width:900px){

.background-sequence img{
transform:scale(0.9) translateZ(0);
}

.archive-header{
padding:20px 25px;
}

.archive-header h1{
font-size:1.1rem;
letter-spacing:3px;
}

.home-link img{
width:45px;
}

.home-link span{
font-size:14px;
}

.project-card{
width:240px;
}

.project-card img{
height:340px;
}

.project-card h2{
font-size:1rem;
letter-spacing:3px;
margin-top:16px;
}

.left{
left:12%;
}

.right{
left:88%;
}

}

/* =========================
   RESPONSIVE — 600px
========================= */

@media (max-width:600px){

.background-sequence img{
transform:scale(0.75) translateZ(0);
}

.archive-header{
padding:15px 18px;
}

.archive-header h1{
font-size:0.9rem;
letter-spacing:2px;
}

.home-link img{
width:38px;
}

.home-link span{
font-size:12px;
}

.home-link{
gap:10px;
}

.project-card{
width:200px;
}

.project-card img{
height:280px;
}

.project-card h2{
font-size:0.85rem;
letter-spacing:2px;
margin-top:12px;
}

.center{
filter:drop-shadow(0 0 12px rgba(255,180,70,.22));
}

.left{
left:5%;
opacity:.3;
transform:translate(-50%,-50%) scale(.70);
}

.right{
left:95%;
opacity:.3;
transform:translate(-50%,-50%) scale(.70);
}

}

/* =========================
   RESPONSIVE — 400px
========================= */

@media (max-width:400px){

.background-sequence img{
transform:scale(0.65) translateZ(0);
}

.archive-header h1{
font-size:0.75rem;
letter-spacing:1.5px;
}

.home-link img{
width:32px;
}

.project-card{
width:170px;
}

.project-card img{
height:240px;
}

.project-card h2{
font-size:0.75rem;
letter-spacing:1.5px;
margin-top:10px;
}

.left,
.right{
opacity:0;
}

}

/* =========================
   RESPONSIVE — LANDSCAPE PHONES
========================= */

@media (max-height:500px) and (orientation:landscape){

.background-sequence img{
transform:scale(0.85) translateZ(0);
}

.archive-header{
padding:10px 20px;
}

.archive-header h1{
font-size:0.85rem;
letter-spacing:2px;
}

.home-link img{
width:32px;
}

.home-link span{
font-size:11px;
}

.home-link{
gap:8px;
}

.project-card{
width:120px;
top:35%;
}

.project-card img{
height:160px;
}

.project-card h2{
font-size:0.7rem;
letter-spacing:2px;
margin-top:8px;
}

.left{
left:25%;
}

.right{
left:75%;
}

}