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

body{

font-family: Helvetica, Arial, sans-serif;
background: #f8f7f5;
color:#222;

}

/* HEADER */

header {

display: flex;
justify-content: space-between;
align-items: center;

padding: 30px 80px;

background: white;

border-bottom: 1px solid #eee;

}

.logo{

font-size:20px;
letter-spacing:2px;

}

nav a{

margin-left:30px;
text-decoration:none;
color:#333;
font-size:16px;

}


/* HERO */

.hero{

height:600px;

background-image:url("images/hero.jpg");
background-size:contain;
background-repeat:no-repeat;
background-position:center;

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

padding-bottom:100px;

}

.hero-text{

background:rgba(255, 255, 255, 0.621);
padding:60px 70px;

}

.hero h1{

font-family: 'Playfair Display, serif';
font-size:35px;
font-weight:500;
letter-spacing:1px;

}

.hero p{

font-size:16px;
letter-spacing:2px;
color:#555;

}

.intro {
max-width: 700px;
margin: 60px auto;
text-align: center;
font-size: 16px;
line-height: 1.6;
color: #444;
}

/* GALLERY */

.gallery{

padding:40px 60px;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

gap:15px;

}

.art{

overflow:hidden;

}

.art img{

width:100%;
height:400px;

object-fit:cover;

transition:transform 0.5s;

}

.art img:hover{

transform:scale(1.08);

}

#lightbox{
overflow:auto;
}

#lightbox img{
max-height:90vh;
max-width:95vw;

width:auto;
height:auto;

object-fit:contain;

touch-action:pan-y;
}

#lightbox img:hover {

transform: scale(1.8);

cursor: zoom-out;

}

#lightbox img.zoomed {

transform: scale(1.8);

cursor: zoom-out;

}

#lightbox img.dragging {
cursor: grabbing;
}

/* FOOTER */

footer{

text-align:center;

padding:40px;

background:#ffffff;

color:rgb(0, 0, 0);

}


.gallery-page{

padding:60px 80px;
text-align:center;

}

.gallery-page h1{

font-family: 'Playfair Display', serif;
font-size:26px;
margin-bottom:60px;

}

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

/* tablets */
@media (max-width:900px){
.gallery-grid{
grid-template-columns:repeat(2,1fr);
}
}

/* phones */
@media (max-width:768px){
.gallery-grid{
grid-template-columns:1fr;
}
}

@media (max-width:768px){

.gallery-page{
padding:40px 20px;
}

}

.gallery-grid img{

width:100%;
height:380px;

object-fit:cover;

transition:transform 0.5s;

}

.gallery-grid img:hover{

transform:scale(1.05);

}

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

.gallery-item img{
width:100%;
display:block;
}

.gallery-overlay{

position:absolute;

bottom:25px;
left:25px;

color:white;

opacity:0;

transition:0.3s ease;

text-shadow:0 3px 8px rgba(0,0,0,0.6);

}

.gallery-overlay h3{

margin:0;
font-size:18px;
font-weight:500;
letter-spacing:1px;

}

.gallery-overlay p{

margin-top:4px;
font-size:13px;
opacity:0.9;

}

.gallery-item:hover .gallery-overlay{

opacity:1;

}

.gallery-overlay h3{

margin:0;
font-size:18px;

}

.gallery-overlay p{

margin:4px 0 0 0;
font-size:14px;
opacity:0.9;

}

.gallery-item:hover img{
filter:brightness(70%);
transition:0.3s;
}

.mailing-list{
margin-top:120px;
text-align:center;
}



.about-page{

padding:120px 80px;

}

.about-container{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}

.about-image img{

width:100%;
height:500px;

object-fit:cover;

}

.about-text h1{

font-family:'Playfair Display', serif;

font-size:26px;

margin-bottom:20px;

}

.about-text p{

margin-bottom:20px;

line-height:1.6;

color:#444;

}

.contact-page{

padding:160px 80px;

max-width:600px;

margin:auto;

text-align:center;

}

.contact-page h1{

font-family:'Playfair Display', serif;

font-size:26px;

margin-bottom:30px;

}

.contact-page p{

margin-bottom:20px;

font-size:16px;

color:#444;

}

.contact-page a{

color:#000;

text-decoration:none;

border-bottom:1px solid #ccc;

}

.contact-page{

padding:60px 80px;
text-align:center;

}

form{

display:flex;
flex-direction:column;
gap:15px;
max-width:500px;
margin:40px auto;

}

.contact-info{

line-height:1.8;

}

input, textarea{

padding:12px;
border:1px solid #ddd;
font-family:inherit;
font-size:14px;

}

textarea{

height:120px;
resize:vertical;

}

button{

padding:12px;
background:#111;
color:white;
border:none;
cursor:pointer;

}

form input,
form textarea{

width:100%;

}
.footer-links{

margin-top:10px;

}

.footer-links a{

margin:0 10px;
text-decoration:none;
color:#444;
}

.footer-links a:hover{

color:#000;

font-size:14px;

}

/* FEATURED SECTION */
.featured{

padding:80px;
text-align:center;

}

h2{

font-family: Helvetica, Arial, sans-serif;

}
.featured-grid{

display:grid;

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

gap:25px;

margin-top:40px;

}

.featured-grid img{

width:100%;
height:300px;

object-fit:cover;

}

.featured-grid img:hover{

transform:scale(1.04);
transition:0.4s;

}

h1, h2 {

font-family: Helvetica, Arial, sans-serif;
font-weight: normal;
}

h2 {

font-size: 16px;
letter-spacing: 4px;
text-transform: uppercase;
}


#lightbox img{

width:auto;
height:auto;

max-width:95%;
max-height:95%;

object-fit:contain;

}

#lightbox {

position:fixed;
top:0;
left:0;

width:100vw;
height:100vh;

background:rgba(255, 255, 255, 0.9);

display: none;
align-items: center;
justify-content: center;

animation: fadeIn 0.3s ease;

z-index: 9999;

}

#lightbox img{

max-height:90vh;
width:auto;

object-fit:contain;

}

.prev, .next{

position:absolute;
top:50%;

color:rgb(177, 165, 115);
font-size:40px;

cursor:pointer;
padding:20px;

}

.prev{
left:20px;
}

.next{
right:20px;
}

.close{

position:fixed;
top:20px;
right:20px;

color:rgb(111, 100, 66);
font-size:40px;

cursor:pointer;

z-index:3000;

background:white;
padding:6px 14px;
border-radius:4px;

}

@keyframes fadeIn {

from {
opacity: 0;
}

to {
opacity: 1;
}

}

@keyframes zoomIn {

from {
transform: scale(0.95);
opacity: 0;
}

to {
transform: scale(1);
opacity: 1;
}

}

.view-all {
display:block;
margin-top:30px;
text-align:left;
font-size: 14px;
letter-spacing:2px;
text-transform:uppercase;
border-bottom: 1px solid #111;
text-decoration:none;
color: #111;
width:fit-content;
}

.instagram {

margin-top: 120px;
text-align: center;
max-width: 850px;
margin-left: auto;
margin-right: auto;

}


.instagram-grid {

display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;

}

.instagram-grid img {

width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;

transition: opacity 0.3s ease;

}

.instagram-grid img:hover {
opacity: 0.8;
}

.insta-handle {

display: inline-block;
margin-top: 30px;
font-size: 14px;
letter-spacing: 2px;
text-decoration: none;
color: #111;

border-bottom: 1px solid #111;
padding-bottom: 4px;

}

.prints-info {

max-width: 700px;
margin: 60px auto;
text-align: center;

}

.prints-info h2 {

font-size: 16px;
letter-spacing: 4px;
text-transform: uppercase;
margin-bottom: 30px;

}

.prints-info p {

font-size: 15px;
line-height: 1.6;
color: #444;
margin-bottom: 30px;

}

.enquire-button {

display: inline-block;
padding: 10px 22px;

font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;

border: 1px solid #111;
text-decoration: none;
color: #111;

transition: all 0.3s ease;

}

.enquire-button:hover {

background: #111;
color: white;

}

.section-title{
font-size:16px;
letter-spacing:4px;
text-transform:uppercase;

font-family: Helvetica, Arial, sans-serif;
font-weight: normal;

text-align:center;

margin-bottom:20px;
}

.section-title::after{
content:"";
display:block;

width:40px;
height:2px;

background:#555;

margin:14px auto 0;

}

@media (max-width: 768px){

header{
padding:20px;
flex-direction:column;
gap:10px;
}

#lightbox img{
max-width:100%;
max-height:85vh;
}

nav{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:15px;
}

nav a{
margin-left:15px;
font-size:14px;
padding:6px 8px;
}

.hero{
height:420px;
background-size:cover;
padding-bottom:60px;
}

.hero-text{
padding:25px;
}

.hero h1{
font-size:26px;
}

.hero p{
font-size:14px;

}

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

.featured-grid{
grid-template-columns:1fr;
gap:20px;
}

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

.about-container{
grid-template-columns:1fr;
gap:30px;
}

.about-image img{
height:auto;
}

@media (max-width: 768px){

header{
padding:20px;
flex-direction:column;
gap:10px;
}

nav a{
margin-left:15px;
font-size:14px;
}

.hero{
height:450px;
padding-bottom:60px;
}

.hero-text{
padding:30px;
}

.hero h1{
font-size:28px;
}

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

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

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

.about-container{
grid-template-columns:1fr;
gap:30px;
}

.about-image img{
height:auto;
}

}

}

@media (pointer: coarse) {

#lightbox img:hover{
transform:none;
}

#lightbox img.zoomed{
transform:none;
}

}

/* MOBILE OPTIMISATION */

@media (max-width: 768px) {

/* reduce page padding */
header{
padding:20px 25px;
}

/* stack navigation nicely */
nav a{
margin-left:15px;
font-size:14px;
}

/* hero image smaller */
.hero{
height:420px;
padding-bottom:60px;
}

/* hero text box */
.hero-text{
padding:30px;
}

/* ABOUT PAGE STACK */
.about-container{
grid-template-columns:1fr;
gap:30px;
}

.about-image img{
height:auto;
}

/* GALLERY 2 columns on phone */
.gallery-grid{
grid-template-columns:repeat(2,1fr);
gap:15px;
}

/* FEATURED WORKS 1 column */
.featured-grid{
grid-template-columns:1fr;
}

/* instagram images 2 columns */
.instagram-grid{
grid-template-columns:repeat(2,1fr);
}

/* slightly smaller section spacing */
.featured,
.instagram,
.prints-info{
padding:50px 25px;
}

}

@media (max-width:700px){

.gallery-grid img{
height:auto;
}

}

@media (max-width:700px){

.gallery-grid{
gap:35px;
padding:0 20px;
}

}

@media (max-width:700px){

.gallery-grid img{
height:auto;
}

}

/* MOBILE NAV */

.menu-toggle{
display:none;
font-size:28px;
cursor:pointer;
}

/* desktop navigation */
.nav-links{
display:flex;
gap:30px;
}

/* mobile layout */
@media (max-width:768px){

.menu-toggle{
display:block;
}

.nav-links{
display:none;
flex-direction:column;

position:absolute;
top:70px;
right:20px;

background:white;
padding:20px;

box-shadow:0 10px 30px rgba(0,0,0,0.1);

z-index:2000;
}


.nav-links a{
margin:10px 0;
}

.nav-links.active{
display:flex;
}

}

header{
position:relative;
z-index:1000;
}

@media screen and (max-width:768px){

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

}