Headings: Playfair Display
Body: Inter


:root{

--bg-main:#0b0b0c;        /* deep cinematic black */
--bg-secondary:#121214;   /* layered depth */
--bg-card:#1a1a1d;        /* cards / panels */

--text-main:#f5f5f5;      /* soft white */
--text-muted:#a1a1aa;     /* secondary text */

--accent:#c8a96a;         /* cinematic gold */
--accent-hover:#e5c07b;

--border:#2a2a2e;



}

.main-nav{
	transition:background 0.3s ease, box-shadow 0.3s ease;
}

.main-nav.scrolled{
	background:rgba(11,11,12,0.95);
	box-shadow:0 5px 20px rgba(0,0,0,0.4);
}

body{
	background:var(--bg-main);
	color:var(--text-main);
	font-family:'Inter', sans-serif;
	background-color: #0b0b0c;
	padding-top:80px;
}


header{
	background:rgba(11,11,12,0.85);
	backdrop-filter:blur(10px);
	border-bottom:1px solid var(--border);
}

nav a{
	color:var(--text-main);
	text-decoration:none;
	margin-left:15px;
	font-size:14px;
	letter-spacing:1px;
	text-transform:uppercase;
	text-decoration: none;
}

nav a:hover{
	color:var(--accent);
}

a.contact_link{
	text-decoration: none;
	color:#fff;
}

nav a.active{
color: var(--accent);
}

nav a.active{
color: var(--accent);
text-shadow: 0 0 6px rgba(197,157,95,0.3);
text-decoration: none;
}




.main-nav{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:9999;
	padding:20px 0;
	background:rgba(11,11,12,0.85);
	backdrop-filter:blur(10px);
	border-bottom:1px solid var(--border);
}


/*
.main-nav{
	padding:20px 0;
	border-bottom:1px solid #eee;
	border-bottom:1px solid #c8a96a;
}
*/

.main-nav .container{
	display:flex;
	justify-content:space-between;
	align-items:center;
}

.menu{
	list-style:none;
	display:flex;
	gap:30px;
}

.menu a{
	text-decoration:none;
	font-weight:500;
}

.hero{
	padding:0px 0;
	padding-bottom: 30px;
	text-align:center;
}

.hero h1{
	font-size:42px;
	margin-bottom:10px;
}

.hero h2{
	font-size:20px;
	font-weight:normal;
	
}

.tagline{
	margin-top:20px;
	
}

.hero-buttons{
	margin-top:40px;
}




.work-card{
	position:relative;
	display:block;
	overflow:hidden;
	background:var(--bg-card);
}

.work-card img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:top center;
	transition:transform .6s ease, opacity .6s ease;
}



.work-card:hover img{
	transform:scale(1.05);
	opacity:0.75;
}

.work-card{
	/*opacity:0;
	transform:translateY(20px);*/
	transition:all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.work-card.show{
	opacity:1;
	transform:translateY(0);
}




.work-overlay{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	padding:20px;

	background:rgba(0,0,0,0.8); /* 🔥 clean cinematic overlay */

	color:white;
}

.work-overlay h3,
.work-overlay span{
	text-shadow:0 2px 6px rgba(0,0,0,0.6);
}

color:white;
}

.work-overlay h3{
	font-size:18px;
	letter-spacing:1px;
}



/* WORK GRID */

.work-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
	gap:24px;
	margin-top:40px;
	max-width:1100px;
	margin-left:auto;
	margin-right:auto;
}


.work-card{
	position:relative;
	display:block;
	width:100%;
	aspect-ratio: 1 / 1.5;
	overflow:hidden;
	border-radius:6px;
}


.work-card img{
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .4s ease;
}

.work-card:hover img{
	transform:scale(1.08);
	cursor:pointer;
}

.work-overlay{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;	
	padding:20px;
	background:linear-gradient(to top, rgba(0,0,0,0.8), transparent);
	color:white;
}

.work-overlay h3{
	margin:0;
	font-size:20px;
}

.work-overlay span{
	font-size:14px;
	opacity:.8;
}


.work-card{
	box-shadow:0 8px 20px rgba(0,0,0,0.08);
}

.btn{

	padding:8px 14px;
	text-decoration:none;
}


.btn-outline{
	border:1px solid #111;
	padding:8px 14px;
	text-decoration:none;
	margin-left:0px;
	color:#111;
}



#reel-btn, .gold-btn{
	border:1px solid var(--accent);
	padding:8px 14px;
	border-radius:2px;
	color:var(--accent);
	transition:.3s ease;
	text-decoration: none;
}

#reel-btn:hover, .gold-btn:hover{
	background:var(--accent);
	color:#000;
}



h1,h2,h3{
	font-family:'Playfair Display', serif;
	letter-spacing:1px;
}

p{
	color:var(--text-muted);
	line-height:1.6;
}

h1.gold{
	color:var(--accent);
}





/* NAVIGATION */

.main-nav{
padding:10px 0;
border-bottom:1px solid #c8a96a;
}

.main-nav .container{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
}

.logo a{
font-size:20px;
font-weight:bold;
text-decoration:none;
}

.menu{
list-style:none;
display:flex;
gap:30px;
padding:0;
margin:0;
}

.menu a{
text-decoration:none;
font-weight:500;
}


/* MOBILE NAV */

@media (max-width: 768px){

.main-nav .container{
flex-direction:column;
align-items:flex-start;
}

.menu{
margin-top:15px;
flex-wrap:wrap;
gap:10px;
}

}






.section{
	background:var(--bg-secondary);
	padding:60px 20px;
	border-top:1px solid var(--border);
}


#reel-modal{
	background:rgba(0,0,0,0.95);
}


::selection{
	background:var(--accent);
	color:black;
}




/* PAGE HERO */

.page-hero{
	height:420px;
	background-size:cover;
	background-position:top;
	display:flex;
	align-items:center;
	justify-content:center;
	/*color:white;*/
	text-align:center;
	position:relative;
}

.page-hero h1{
	max-width:720px;
	margin:0 auto;
}

.page-hero::after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.45);
}

.page-hero h1{
position:relative;
font-size:40px;
z-index:2;
color:#fff;
}





/* WORK PAGE */

.work-section{
	max-width:1200px;
	margin:80px auto 0 auto;
	padding:0 20px;
}

.work-section{
margin-top:80px;
}

.work-section h2{
font-size:28px;
/*
margin-bottom:30px;

border-bottom:1px solid #eee;
border-bottom:1px solid #c8a96a;
padding-bottom:10px;
*/
}

.work-list{
display:flex;
flex-direction:column;
gap:20px;
}

.project{
border:1px solid #eee;
padding:20px;
cursor:pointer;
transition:all .3s ease;
}

.project:hover{
background:#fafafa;
}

.project-header{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
}

.project-header h3{
margin:0;
font-size:20px;
}

.role{
color:#555;
font-size:14px;
}

.year{
color:#888;
font-size:14px;
}

.project-details{
display:none;
margin-top:15px;
color:#444;
line-height:1.6;
}




/* PROJECT HERO */

.project-hero{
height:420px;
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
position:relative;
color:white;
}

.project-hero{
position:relative;
height:60vh; /* or whatever you're using */

background-image:url('/path/image.jpg');
background-size:cover;
background-position:center;
}

/* GRAYSCALE + DARK OVERLAY */

.project-hero::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background:inherit; /* reuse same image */
background-size:cover;
background-position:center;

filter: grayscale(100%);
z-index:1;
}

/* OPACITY / DARKNESS LAYER */

.project-hero::after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background:black;
opacity:0.6; /* tweak this */

z-index:2;
}

.project-hero::after{
background:linear-gradient(
to bottom,
rgba(0,0,0,0.2),
rgba(0,0,0,0.7)
);
}




.project-hero *{
position:relative;
z-index:3;
}




.hero-overlay{
background:rgba(0,0,0,0.45);
padding:40px;
text-align:center;
}

.project-meta{
margin-top:10px;
font-size:16px;
opacity:0.9;
}



.hero-frame{
position:absolute;
top:15px;
left:15px;
right:15px;
bottom:15px;
z-index:3;
pointer-events:none;
}

.hero-frame::before,
.hero-frame::after{
content:"";
position:absolute;
width:40px;
height:40px;
border:2px solid #c59d5f;
}

/* top-left */
.hero-frame::before{
top:0;
left:0;
border-right:none;
border-bottom:none;
}

/* bottom-right */
.hero-frame::after{
bottom:0;
right:0;
border-left:none;
border-top:none;
}


/* PROJECT CONTENT */

.project-content{
	margin-top:60px;
	max-width:800px;
	margin: 80px auto;
}

.project-content h2{
margin-bottom:20px;
}


/* PROJECT DETAILS GRID */

.project-details-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
margin-top:40px;
}

.detail h3{
margin-bottom:5px;
font-size:16px;
color:#666;
}


/* GALLERY */

.project-gallery{
margin-top:80px;
}

.gallery-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-top:30px;
}

.gallery-grid img{
width:100%;
height:auto;
display:block;
}




/* CRAFT PAGE */

.hero-craft{
background-image:url('/assets/img/craft-bg.jpg');
}


.craft-intro{
	margin-top:60px;
	max-width:800px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

.craft-lead{
font-size:20px;
line-height:1.7;
}



.craft-section h2{
margin-bottom:15px;
font-size:26px;
}

.craft-section p{
line-height:1.7;
}

.craft-section{
	margin-top:60px;
	max-width:800px;
	margin-left:auto;
	margin-right:auto;
	padding:0 20px; /* prevents edge collision on smaller screens */
}




/* CONTACT PAGE */

.hero-contact{
background-image:url('/assets/img/contact-bg.jpg');
}


.contact-section{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:60px;
	margin-top:60px;
	max-width:800px;
	margin-left:auto;
	margin-right:auto;
	padding:0 20px;
}


.contact-email{
margin-top:20px;
font-weight:bold;
}

.contact-form form{
display:flex;
flex-direction:column;
gap:15px;
}

.contact-form input,
.contact-form textarea{
padding:12px;
border:1px solid #ddd;
font-size:14px;
width:90%;
}

.contact-form button{
width:160px;
cursor:pointer;
}

.hidden-field{
display:none;
}

/* MOBILE */

@media (max-width:768px){

.contact-section{
grid-template-columns:1fr;
}

}




.craft-list{
	margin:40px auto 0 auto;   /* centers it */
	max-width:800px;           /* match craft-section */
	padding:0 20px;            /* breathing room on mobile */
}

.craft-list{
	margin:80px auto 0 auto; /* more breathing room before title */
}

.craft-item{
margin-bottom:60px;
border-bottom:1px solid #eee;
border-bottom:1px solid #c8a96a;
padding-bottom:25px;
}


.craft-date{
font-size:12px;
opacity:.6;
margin-bottom:10px;
}



.tags{
margin-top:20px;
}

.tag{
display:inline-block;
background:#eee;
padding:6px 10px;
margin-right:8px;
border-radius:4px;
font-size:12px;
}





/* MODAL BACKGROUND */

#reel-modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.95);
display:none;
justify-content:center;
align-items:center;
z-index:9999;
}

/* CONTENT */

.reel-content{
position:relative;
width:90%;
max-width:1000px;
padding:5%;
}

/* VIDEO */

#reel-video{
width:100%;
height:auto;
max-height:90vh;
padding-top: 30px;
}

/* CLOSE BUTTON */

.close-reel{
position:absolute;
top:-40px;
right:0;
color:white;
font-size:28px;
cursor:pointer;
}

/* OPTIONAL HOVER EFFECT */

#reel-btn{
cursor:pointer;
}




h2.golden{
	color:#c8a96a ;
}










div.logo img{
	width:25%;
}


@media(max-width:768px){

.reel-content{
width:95%;
}

.close-reel{
top:-35px;
right:10px;
}

div.logo img{
	width:40%;
}

}



/* CATEGORY HEADER */


.category-header{
	display:flex;
	justify-content:space-between;
	align-items:center;
	cursor:pointer;
	padding:20px 0;
	border-bottom:1px solid var(--border);
	transition:all 0.3s ease;
}

.category-header h2{
	margin:0;
	font-size:22px;
	letter-spacing:0.08em;
	transition:color 0.3s ease;
}

.category-header:hover h2{
	color:var(--accent);
}

/* TOGGLE ICON */

.toggle-icon{
	font-size:18px;
	color:var(--accent);
	transition:transform 0.4s ease;
}

.work-category.active .toggle-icon{
	transform:rotate(45deg); /* + becomes × */
}

/* CONTENT */

.category-content{
display:none;
padding:20px 0;
}

/* OPEN STATE */

.work-category.active .category-content{
	display:block;
}

.work-category::after{
	content:"";
	display:block;
	width:60%;
	height:1px;
	background:rgba(255,255,255,0.05);
	margin:40px auto 0;
}



.category-content{
	display:none;
	padding:20px 0;
	transition:all 0.3s ease;
}



/* Gallery wall */

/*
.gallery-wall{
	display:grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap:15px;
}
*/

.gallery-wall{
column-count: 4;
column-gap: 15px;
}

.gallery-wall{
max-width:1200px;
margin:0 auto;
}


.gallery-item img{
transition:transform .4s ease, opacity .3s ease;
}

.gallery-item:hover img{
transform:scale(1.03);
opacity:0.9;
}



.gallery-item{
break-inside: avoid;
margin-bottom:15px;
cursor:pointer;
}

.gallery-item img{
width:100%;
height:auto; 
display:block;
border-radius:6px;
}






@media(max-width:1200px){
.gallery-wall{ column-count: 3; }
}

@media(max-width:768px){
.gallery-wall{ column-count: 2; }
}

@media(max-width:480px){
.gallery-wall{ column-count: 1; }
}

















/* =========================
   LIGHTBOX (FIXED VERSION)
========================= */

#lightbox{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.96);

	display:none;
	z-index:9999;

	padding:40px 20px;
	box-sizing:border-box;
}

/* CONTENT WRAPPER */
.lightbox-content{
	position:relative;
	width:100%;
	height:100%;
}

/* FIXED HEADER (TITLE + CAPTION) */
.lightbox-header{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	padding:0px;
	text-align:center;

	background:linear-gradient(
		to bottom,
		rgba(0,0,0,0.85),
		rgba(0,0,0,0)
	);

	z-index:2;
}

.lightbox-header{
	display:flex;
	flex-direction:column;
	align-items:center; /* true center */
	justify-content:center;
}

#lightbox-title{
	font-size:20px;
	margin-bottom:8px;
	color:var(--text-main);
}

#lightbox-caption{
	font-size:14px;
	color:var(--text-muted);
	display:block;
}

#lightbox-title{
	margin-bottom:4px;   /* tighter connection */
	line-height:1.2;
}

#lightbox-caption{
	margin-bottom:14px;  /* space goes BELOW the pair */
	font-size:14px;
	color:var(--text-muted);
}



/* CONTROLS (UNDER HEADER) */
.lightbox-controls{
	position:absolute;
	top:90px;
	left:0;
	width:100%;
	text-align:center;
	z-index:2;
}

.lightbox-controls{
	top:75px; /* was 90px */
}

.lightbox-controls button{
	background:none;
	border:1px solid var(--accent);
	color:var(--accent);
	padding:8px 16px;
	margin:0 10px;
	cursor:pointer;
	font-size:11px;
	letter-spacing:1px;
	text-transform:uppercase;
	transition:all .3s ease;
}

.lightbox-controls button:hover{
	background:var(--accent);
	color:#000;
}





/* MEDIA AREA */
.lightbox-media{
	position:absolute;
	top:120px;
	bottom:40px;
	left:0;
	right:0;

	display:flex;
	align-items:center;
	justify-content:center;
}

/* FRAME (this is the key) */
.lightbox-frame{
	display:inline-flex;
	align-items:center;
	justify-content:center;

	padding:2px; /* 🔥 your 2px breathing space */
	border:2px solid var(--accent);
	border-radius:8px;

	background:black; /* prevents edge gaps */
}



/* MEDIA */
/*
#lightbox-img,
#lightbox-video{
	max-width:90vw;
	max-height:75vh;

	width:auto;
	height:auto;

	object-fit:contain;
	border-radius:6px;
	background:black;
}
*/

#lightbox-img,
#lightbox-video{
	max-width:90vw;
	max-height:70vh;

	min-width:65vmin;
	min-height:65vmin;

	width:auto;
	height:auto;

	object-fit:contain;
	border-radius:6px;
	background:black;
}

/* CLOSE BUTTON */
.close-lightbox{
	position:fixed;
	top:25px;
	right:35px;
	font-size:28px;
	color:white;
	cursor:pointer;
	z-index:10000;
	opacity:0.7;
	transition:opacity 0.3s ease;
}

.close-lightbox:hover{
	opacity:1;
}

/* OPEN ANIMATION (ONLY FIRST LOAD) */
#lightbox.show.initial #lightbox-img,
#lightbox.show.initial #lightbox-video{
	opacity:0;
	transform:scale(0.98);
}

#lightbox.show.initial.active #lightbox-img,
#lightbox.show.initial.active #lightbox-video{
	opacity:1;
	transform:scale(1);
}







/* MODAL Article */

#craft-modal{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.95);
	display:none;

	/* keep these */
	justify-content:center;
	align-items:center;

	z-index:9999;
	padding:40px 20px;
}

#craft-modal{
	align-items:flex-start; /* ✅ move content up */
	padding-top:80px;       /* controls how far from top */
}

#craft-modal.show{
	display:flex; /* THIS is the key */
}

.craft-modal-content{
	max-width:800px;
	width:90%;
	margin:0 auto; /* extra safety */
	color:white;
	position:relative;
	overflow-y:auto;
	max-height:90vh;
	transform:scale(0.95);
	opacity:0;
	transition:all .4s ease;
	text-align:center; /* centers title block */
}



.close-craft-modal{
	position:fixed;
	top:30px;
	right:40px;
	font-size:32px;
	cursor:pointer;
	color:white;
	z-index:10000;
	opacity:0.8;
	transition:opacity 0.3s ease;
}

.close-craft-modal:hover{
	opacity:1;
}

.craft-modal-content img,
.craft-modal-content video{
	width:100%;
	margin:20px 0;
	border-radius:6px;
}

.craft-modal-content h2{
	margin-bottom:15px;
}

.craft-modal-content p{
	line-height:1.7;
	color:var(--text-muted);
}



#craft-modal-body h2{
	color:var(--accent);
	text-align:center;
	margin-bottom:20px;
}


#craft-modal.active .craft-modal-content{
	transform:scale(1);
	opacity:1;
}

.craft-modal-content img,
.craft-modal-content video{
	display:block;
	margin:30px auto;
}

#craft-modal-body p{
	text-align:left;
}

.modal-animate{
	opacity:0;
	transform:translateY(20px);
}

.modal-animate.show{
	opacity:1;
	transform:translateY(0);
	transition:all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}



/* Content */

.about-content{
	max-width:720px;
	margin:10px auto;
	padding:0 20px;
}

.about-content p{
	font-size:17px;
	line-height:1.85;
	color:var(--text-muted);
	margin-bottom:24px;
}


.about-content{
	opacity:0;
	transform:translateY(20px);
	transition:all 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-content.visible{
	opacity:1;
	transform:translateY(0);
}


/* project-modal */

#project-modal{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.96);
	display:none;
	z-index:9999;

	overflow-y:auto;
}

#project-modal.show{
	display:block;
}

/* close button */
.close-project-modal{
	position:fixed;
	top:30px;
	right:40px;
	font-size:32px;
	color:white;
	cursor:pointer;
	z-index:10000;
}

/* content wrapper */
.project-modal-content{
	max-width:1200px;
	margin:80px auto;
	padding:0 20px;
	color:white;
}


.project-gallery{
	max-width:1000px;
	margin:80px auto;
}

.gallery-wall{
	column-count:3;
	column-gap:12px;
}

.gallery-item{
	margin-bottom:12px;
}



/* Project page - video */

.project-featured-video{
    max-width:1000px;
    margin:80px auto;
}

.project-featured-video video{
    width:100%;
    border-radius:6px;
    display:block;
}

.project-featured-video video{
    opacity:0;
    transition:opacity .6s ease;
}

.project-featured-video video.playing{
    opacity:1;
}


#project-modal video{
	width:100%;
	height:auto;
	max-height:80vh;
	display:block;
}










@media(max-width:768px){

	.lightbox-header{
		padding:20px 15px;
	}

	.lightbox-controls{
		top:70px;
	}

	.lightbox-media{
		top:110px;
		bottom:20px;
	}

	#lightbox-img,
	#lightbox-video{
		min-width:90vw;
		min-height:60vh;
	}

	#lightbox-caption{
		margin-bottom:10px;
		font-size:13px;
	}

}


.gallery-item{
	cursor:pointer;
	position:relative;
}

.gallery-item::after{
	content:"VIEW";
	position:absolute;
	bottom:10px;
	right:10px;
	font-size:10px;
	letter-spacing:1px;
	color:var(--accent);
	opacity:0;
	transition:.3s;
}

.gallery-item:hover::after{
	opacity:1;
}






@media(max-width:768px){
.gallery-slider{
	height:300px;
}


}







@media(max-width:768px){

.hero-video{
height:60vh;
}

}



@media(max-width:768px){
.work-grid{
	grid-template-columns: repeat(2, 1fr);

}
}

@media(max-width:480px){
.work-grid{
	grid-template-columns: repeat(2, 1fr);
	gap:14px;
}
}








/* CSS Fixes */

@media (max-width:768px){

.project-details-grid{
grid-template-columns:1fr;
}

.gallery-grid{
grid-template-columns:1fr;
}

.project-hero{
height:320px;
}

}