body { font-family: Georgia; padding: 50px; background: #fff; color: #111; }
h1 { font-weight: 300; text-transform: uppercase; letter-spacing: 2px; }
h2 { font-weight: 300; text-transform: uppercase; letter-spacing: 2px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 20px; }
.grid img { width: 100%; height: auto; display: block; }


header p { 
  font-size: 0.8rem; 
  text-transform: uppercase; 
  letter-spacing: 2px; 
  color: #666; 
  justify-content: center;
  align-items: center;
  text-align: center;
}

.client-access { margin-top: 60px; border-top: 1px solid #eee; pt: 20px; }
.client-access h3 { font-size: 0.7rem; text-transform: uppercase; color: #aaa; }
.client-access ul { list-style: none; padding: 0; }
.client-access a { color: #111; text-decoration: none; border-bottom: 1px solid #ccc; }
.client-access a:hover { border-bottom: 1px solid #000; }

/* Container: Prevents the grid itself from pushing past the screen edges */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1200px));
  gap: 20px;
  max-width: 100%; /* Ensures grid doesn't overflow parent */
  margin: 0 auto;
}

/* Image: Forces the image to never exceed the width of its grid cell */
.gallery-grid img {
  max-width: 100%; /* Key: Image cannot be wider than its container */
  height: auto;    /* Key: Maintain aspect ratio */
  display: block;
}

/* 1. Force the container to be ONLY as wide as the image */
.photo {
    display: inline-table !important; /* Forces the box to wrap the content width */
    width: auto !important;          /* Prevents it from being 100% wide */
    /* border: 2px solid #ccc;  */
    padding: 10px;
    margin: 15px;
    background-color: #fff;
    box-sizing: border-box;
}

/* 2. Fix the image proportions and prevent stretching */
.photo img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;         /* This fixes the squashed/stretched look */
    max-height: 75vh !important;     /* Keeps portrait photos on screen */
    width: auto !important;          /* Overrides the 1200px HTML attribute */
}

/* 3. Ensure the grid doesn't force children to be full width */
.gallery-grid {
    display: block !important;       /* Resets the grid behavior */
    text-align: center !important;   /* Centers the photos */
}

.nav-links {
  margin-top: 32px;
  margin-bottom: 32px;
  justify-content: center;
  align-items: center;
  text-align: center;
 
}

.nav-links a {
	font-style: italic;
  margin: 0 16px;
  text-decoration: underline;
  color: #111;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 2px;
}

/* Section Styles */
.content-section {
  padding: 100px 0;
  /* max-width: 1200px; */
  margin: 0 auto;
}
h1 {
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: 4px;
  font-weight: 300;
  margin-bottom: 30px;
  font-size: 2rem;

}
.content-section h2 {
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: 4px;
  font-weight: 300;
  margin-bottom: 30px;
  font-size: 1.5rem;

}



.section-image img {
  width: 80vw;       /* Forces image to window width */
  /* 
  margin-left: calc(-50vw + 50%); /* Centers the over-sized image */ */
  /* Set a fixed height for a cinematic look */
  object-fit: cover;  /* Prevents distortion */
  display: block;
  background: #fff;
	padding: 10px; /* Matting effect */
	border: 1px solid #eee; /* Thin frame */
	box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.content-section p {
  /* margin-top: 30px; */
  /* max-width: 600px; */
  line-height: 1.8;
  color: #444;
}

.email-button {
  display: inline-block;
  margin-top: 20px;
  color: #111;
  text-decoration: none;
  border-bottom: 1px solid #111;
  padding-bottom: 5px;
}

.logo-container {
  /* width: 120px; Control the size of your logo here */
  /* margin-bottom: 20px; */
  justify-content: center;
	align-items: center;
	text-align: center;
	max-width: 90vw;
	margin: 0 auto 20px auto;
	  display: block;
}

.site-logo {
width: 100%;
  height: auto;
  display: block;
}
/* 
/* If you want to change the stroke/fill color via CSS */
.site-logo path, 
.site-logo circle {
  stroke: #111;
} */

.hero p {
  font-family: sans-serif;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 0.75rem;
  margin-top: 10px;
  justify-content: center;
	align-items: center;
	text-align: center;
	display: flex;
}

/* 2. The Reveal Trigger */
/* When the hero (60vh) is scrolled past, the sticky header hits its 'sticky' constraint */
:root {
  scroll-behavior: smooth;
}

.back-to-top {
  text-decoration: none;
}
.back-to-top:hover {
  color: #000;
}

body {
	
  margin: 0;
  padding: 2vh;
  min-height: 100vh;
  /* 270 degrees: Right to Left flow */
  /* background: linear-gradient(0deg, rgb(169, 141, 88) 0%, rgb(224, 214, 194) 150%); */
  background: linear-gradient(0deg, rgb(169, 141, 88) 0%, rgb(255, 255, 255) 280%);
  background-attachment: fixed;
font-family: Georgia;
  color: #1a1a1a;
  /* ; */
}
p{
	padding: 20px;
	background: rgba(255, 255, 255, 0.272);
	white-space: pre-line;
}

/* The Base Button Style */
.btn {
  display: inline-block;
  padding: 12px 28px;
  font-family: Georgia, serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-decoration: none;
  transition: all 0.3s ease; /* Makes the hover feel smooth */
  cursor: pointer;
  border: 1px solid #1a1a1a;
  background: transparent;
  color: #1a1a1a;
  margin-top: 20px;
}

/* Hover State: Invert the colors */
.btn:hover {
  background: #1a1a1a;
  color: #ffffff;
}

/* Secondary Style: Using your Gold/Tan color */
.btn-gold {
  border-color: rgb(169, 141, 88);
  color: rgb(169, 141, 88);
}

.btn-gold:hover {
  background: rgb(169, 141, 88);
  color: #fff;
}


/* The HBox Container */
.hbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* Allows items to move to next line if needed */
  justify-content: space-between;
  width: 100%;
  margin-bottom: 5%;
}

/* Desktop Proportions */
.col-60 { width: 60%; }
.col-50 { width: 48%; }
.col-40 { width: 38%; }
.col-33 { width: 31%; }

/* Mobile Collapse Logic */
@media (max-width: 768px) {
  /* Turn the HBox into a VBox */
  .hbox {
	flex-direction: column;
	gap: 1.5rem; /* Vertical spacing between stacked items */
  }

  /* Force all proportional children to full width */
  .col-60, .col-50, .col-40, .col-33 {
	width: 100%;
  }
}