html, body{
	Margin: 0;
	padding: 0;
	background-color: #ebf5f2;
}
/* These are examples of how to use the fonts

Archivo Black: CSS class:

.archivo-black-regular {
  font-family: "Archivo Black", sans-serif;
  font-weight: 400;
  font-style: normal;

PT Sans: CSS classes:

.pt-sans-regular {
  font-family: "PT Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.pt-sans-bold {
  font-family: "PT Sans", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.pt-sans-regular-italic {
  font-family: "PT Sans", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.pt-sans-bold-italic {
  font-family: "PT Sans", sans-serif;
  font-weight: 700;
  font-style: italic;
}

}

*/

/*Fonts for Left Slidebar*/
a {
    text-decoration: none;
}
h1{
	font-family: "Archivo Black", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 17px;
	margin-top: 20px;
	margin-bottom: 10px;
	color: #ebf5f2;
 }
h2{
	font-family: "PT Sans", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 14px;
	position: relative;
	margin-top: 10px;
	margin-bottom: 5px;
	color: #c2cbca;
	padding-left: 4px;
}
h2:after{
	content: "";
	position: absolute;
	background-color: #ebf5f2;
	height: 2px;
	width: 0;
	left: 0;
	bottom: -5px;
	transition: width 0.3s ease;
}
h2:hover:after{
	width: 100%;
}
h3{
	font-family: "PT Sans", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 14px;
	margin-top: 10px;
	margin-bottom: 10px;
	color: #231f20;
	background-color: #c2cbca;
	padding-left: 4px;
	padding-top: 3px;
	padding-bottom: 3px;
	border-radius: 5px;
}
p{
	width: auto;
	padding-left: 20px;
}
h4{
  font-family: "Archivo Black", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 45px;
  margin-top: -8px;
  margin-bottom: -38px;
  color: #231f20;
 }
 h5{
	font-family: "PT Sans", sans-serif;
	font-weight: 400;
	font-style: normal;
  font-size: 17px;
  margin-bottom: 5px;
  color: #231f20;
 }
 h6{
 	font-family: "PT Sans", sans-serif;
	font-weight: 700;
	font-style: normal;
  font-size: 15px;
  margin-bottom: -18px;
  padding-left: 10px;
  color: #231f20;
 }

/*Gallery Previewer*/
.gallery-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  margin-bottom: 0px;
}

/* 3. Resizes based on image height (No more black space) */
.main-image-container {
  width: 100%;
  max-width: 1000px;
	display: flex;
  justify-content: flex-start; /* Keeps the image tucked to the left */
}

#featured {
/* The "No-Stretch" Combo */
  width: auto;        /* Let the image decide its own width... */
  max-width: 100%;    /* ...unless it's wider than the container */
  height: auto;       /* Let the image decide its own height... */
  max-height: 80dvh;   /* ...unless it's taller than 80% of the screen */
  margin-bottom: 15px;
  
  /* The Safety Net */
  object-fit: contain; 
  display: block;
  transition: opacity 0.3s ease-in-out;
}

/* 2. Thumbnails wrap to the next line when screen is narrow */
.thumbnail-bar {
  display: flex;
  flex-wrap: wrap;  /* This makes them move down instead of off-screen */
  gap: 10px;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

.thumb {
  width: 80px;
  height: 50px;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.6;
  transition: 0.2s;
  border-radius: 2px;
  border-color: #231f20;
  border: 2px;
}

.thumb:hover, .thumb.active {
  opacity: 1;
}

/* Fade class for JS */
.fade-hide {
  opacity: 0;
}
/*CSS Code for Page Setup*/
.main{
	display: Flex;
	align-items: flex-start;
	width: 100%;
}
.Slidebar{
	position: sticky;
	min-width: 200px;
	max-width: 200px;
	top: 0dvh;
	height: 95dvh;
	background-color: #231f20;
	padding: 20px;
	overflow-y: auto;
}
.Content{
	flex: 1;
	max-width: 1000px;
	padding: 20px;
    padding-bottom: 50px;
}
/*CSS Code for Image Setup*/
img.Wyattslogo{
	width: 100%;
	margin-bottom: 1px;
}
/*CSS Code for Line Setup*/
p.Whiteline{
	border-style: solid;
	border-width: 1px;
	max-height: auto;
	border-color: #ebf5f2;
}
p.Blackline{
	border-style: solid;
	border-width: 1px;
	max-height: auto;
	border-color: #231f20;
}

/* Mobile Breakpoint */
@media screen and (max-width: 650px) {
    /* Hide Desktop Sidebar */
    .Slidebar {
        display: none;
    }

    .main {
        display: block; /* Stack content vertically */
    }

    /* Mobile Header Styling */
    .mobile-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #231f20;
        padding: 10px;
        position: sticky;
        top: 0;
        z-index: 1002;
        height: 35px;
        border-bottom: 2px solid #ebf5f2;
    }

    .mobile-logo {
        height: 35px;
        width: auto;
    }

    .menu-icon {
        height: 55px;
        cursor: pointer;
        margin-right: -10px;
    }

    /* Dropdown Menu Styling */
    .mobile-nav {
        background-color: #231f20;
        max-height: 0; /* Hidden by default */
        overflow: hidden;
        transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
        position: fixed;
        top: 55px; /* Sits right under header */
        right: 0px;
        left: 0px;
        z-index: 1001;
        padding: 0 20px;
        border-radius: 0px 0px 8px 8px;
    }

    /* When the menu is "open" */
    .mobile-nav.open {
        max-height: 100dvh; /* Smooth drop down */
        padding-bottom: 30px;
        padding-top: 15px;
        overflow-y: auto;
        border-radius: 0px 0px 8px 8px;
    }

    .mobile-nav h1 {
        font-size: 18px;
    }
    h1 {
        font-size: 15px !important; /* Slightly smaller for mobile */
        margin-top: 15px;
        margin-bottom: 8px;
    }

    /* Target h2 (Project Links like BeHerd or Zara Rebrand) */
    h2 {
        font-size: 13px !important;
        padding-left: 4px;
    }

     h3 {
        font-size: 13px !important;
        padding-left: 4px;
    }

    /* Target h4 (Main Project Title) */
    h4 {
        font-size: 27px !important; /* Reduces the 45px desktop size */
        margin-top: 5px;
        margin-bottom: -33px;
        line-height: 1.1;
    }

    /* Target h5 (Project Summary/Description) */
    h5 {
        font-size: 16px !important;
        line-height: 1.2; /* Adds more breathing room for reading on phones */
    }
    h6 {
        font-size: 13px !important;
        line-height: 1.5; /* Adds more breathing room for reading on phones */
        padding-left: 5px;
    }
    .thumb {
  		width: 50px;
  		height: 35px;
  	}
    .nav-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    background-color: rgba(0, 0, 0, 0); /* Completely invisible, or use 0.2 for a slight dim */
    z-index: 1000; /* Sits right under the mobile-nav (999) */
    display: none;
    pointer-events: none;
    }

    .nav-backdrop.active {
    display: block;
    pointer-events: auto;
    }
}

/* Hide mobile header on Desktop */
@media screen and (min-width: 651px) {
    .mobile-header, .mobile-nav {
        display: none;
    }
}