@import url("https://fonts.googleapis.com/css2?family=Actor&family=Calistoga&family=Roboto+Mono:wght@300;400;500&display/swap");
/* This imports the fonts from Google so we can use them in our website */

/* GLOBAL LINK STYLES */

a,
a:hover,
a:active,
a:focus {
	color: var(--black); /* Uses the black   color variable */
	text-decoration: none;
}

a:visited {
	text-decoration: underline; /* Adds underline only on hover */
}

a:hover {
	text-decoration: underline; /* Adds underline only on hover */
}

/* VARIABLES */
/* root stores reusable variables ( colors) */
:root {
	--beige: #f1eee6; /* Light beige background   color */
	--pink: #f5a1c3; /* Pink accent   color */
	--blue: #a5bbf7; /* Blue accent   color */
	--yellow: #fad062; /* Yellow accent   color */
	--pear: #cdd859; /* Light green   color */
	--pine: #365e56; /* Dark green   color */
	--indigo: #a38be8; /* Purple   color used for borders */
	--orange: #f58442; /* Orange accent   color */
	--black: #131313; /* Main black text   color */
	/* makes it easier to reuse  colors throughout the site */
}

/* GLOBAL RESET */
/* Applies to all elements */
* {
	box-sizing: border-box; /* Includes padding and border inside total width */
	margin: 0;
	padding: 0;
}

/* BODY */
body {
	background: var(--beige); /* Sets background   color */
	font-family: "Roboto Mono", monospace; /* Sets default font */
	color: var(--black); /* Sets default text   color */
	line-height: 1.6; /* Controls spacing between lines */
	margin-bottom: 40px; /* Adds space at bottom of page */
	font-size: 1em; /* Slightly reduces base font size */
	overflow-x: hidden;
}

/* WRAPPER */

.wrapper {
	max-width: 1300px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 60px 20px;
}

.landing-wrapper {
	padding: 100px 100px 100px 0px;
	max-width: 1300px; /* Prevents content from stretching too wide */
	margin: auto;
}

/* IMAGES */
img {
	width: 100%; /* Makes image fill its container */
	display: block; /* Removes small gap below image */
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3 {
	font-family: "Calistoga", serif;
	color: var(--pine);
}

/* Individual heading sizes */
h1 {
	font-size: 3em;
	padding: 2em 0em 1em 0em; /* Space below heading */
}
h2 {
	font-size: 2.5em;
	padding: 2em 0em 1em 0em;
}
h3 {
	font-size: 2em;
	padding: 0em 0em 1em 0em;
}

/* Caption text styling */
.caption {
	font-family: "Actor", sans-serif;
	font-size: 0.8em;
	text-transform: uppercase; /* Makes letters uppercase */
	letter-spacing: 1px; /* Adds spacing between letters */
}

/* Adds spacing after paragraphs only in certain sections */

.hero-text p,
.what p,
.contact-intro {
	margin-bottom: 1.2em; /* Adds spacing below paragraph */
	/* This avoids affecting all paragraphs globally */
}

p {
	margin-bottom: 1.2em;
}

p:last-child {
	margin-bottom: 0;
}

/* =========================================================
   SHARED POSITIONING
   ========================================================= */

.hero-text,
.logo,
.nav {
	position: relative;
	z-index: 2;
}

/* =========================================================
   HEADER / NAVIGATION / DROPDOWNS
   ========================================================= */

/* HEADER BAR */
/* Outer header spacing */
.header {
	background: transparent; /* No background */
	padding: 30px 20px 0 20px; /* Top and side spacing */
	position: relative;
	z-index: 9999;
}

/* Inner header container */
.header-inner {
	max-width: 1300px; /* Limits width */
	margin: 0 auto; /* Centres horizontally */
	background: white; /* White background */
	border: 3px solid var(--indigo); /* Purple border */
	border-radius: 25px; /* Rounded corners */
	padding: 18px 40px; /* Inner spacing */
	display: flex; /* Uses flexbox */
	justify-content: space-between; /* Pushes logo and nav apart */
	align-items: center;
	position: relative;
}

.header,
.header-inner,
.nav {
	overflow: visible;
}

.logo {
	width: 80px; /* Controls logo width */
}

/* NAVIGATION */
.nav a {
	text-decoration: none;
	font-family: "Roboto Mono", sans-serif;
	color: var(--black);
}

/* Underline nav links on hover */
.nav a:hover {
	text-decoration: underline;
}

/* Main nav container */
.nav {
	font-size: 1em;
	display: flex; /* Horizontal layout */
	align-items: center; /* Vertically align items */
	gap: 120px; /* Space between links */
	position: relative;
	margin-right: 160px;
}

/* Dropdown wrapper */

.dropdown {
	position: relative;
	z-index: 10000;
	padding-bottom: 18px;
	margin-bottom: -18px;
}

/* Button for dropdown trigger */
.dropbtn {
	background: none; /* No background */
	border: none; /* No border */
	font-family: "Roboto Mono", monospace; /* Matches main font */
	color: var(--black);
	font-size: inherit; /* Same size as parent text */
	cursor: pointer; /* Pointer on hover */
	padding: 0; /* Remove default padding */
}

/* Main dropdown menu */
.dropdown-menu {
	position: absolute;
	top: calc(100% - 18px);
	left: auto;
	right: 0;
	background: white;
	border: 2px solid var(--indigo);
	border-radius: 12px;
	padding: 10px 0;
	display: none;
	min-width: 200px;
	z-index: 10001;
}

/* Links inside dropdown */
.dropdown-menu a {
	display: block; /* Stack vertically */
	padding: 10px 20px; /* Inner spacing */
	white-space: nowrap; /* Prevent text wrapping */
}

/* Hover effect for dropdown links */
.dropdown-menu a:hover {
	background: var(--beige); /* Light highlight on hover */
}

/* Show dropdown on hover of parent */
/* .dropdown:hover .dropdown-menu,
.dropdown-menu:hover {
	display: block;
} */

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu,
.dropdown-menu:hover {
	display: block;
}

.dropdown-content {
	position: absolute; /* stay aligned with button */
	top: 100%; /* immediately below button */
	left: 0;
	display: none;
}

/* Submenu wrapper */
.submenu {
	position: relative; /* Needed for flyout positioning */
}

/* Submenu flyout content */
.submenu-content {
	position: absolute;
	top: 0;
	left: calc(100% - 2px);
	background: white;
	border: 2px solid var(--indigo);
	border-radius: 12px;
	padding: 10px 0;
	display: none;
	min-width: 180px;
	z-index: 100002;
}

/* Links inside submenu */
.submenu-content a {
	padding: 10px 20px; /* Inner spacing */
	display: block; /* Stack vertically */
}

/* Show submenu flyout on hover */
/* .submenu:hover .submenu-content,
.submenu-content:hover {
	display: block;
} */

.submenu:hover .submenu-content,
.submenu:focus-within .submenu-content,
.submenu-content:hover {
	display: block;
}

.dropdown-menu,
.submenu-content {
	pointer-events: auto;
}

/* =========================================================
   HERO
   ========================================================= */

.hero {
	position: relative;
	display: flex; /* Places image and text side by side */
	align-items: center; /* Vertically aligns items */
	gap: 60px; /* Space between image and text */
}

.hero-text {
	position: relative;
	z-index: 2;
}

.hero-image {
	width: 25vw;
	min-width: 430px;
	max-width: 440px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	border: 4px solid var(--pear);
}

/* Makes the image fill the circular container */
.hero-image img {
	width: 100%; /* Full width of container */
	height: 100%; /* Full height of container */
	object-fit: cover; /* Crops image nicely inside circle */
}

/* Limits width of text in the "what I do" section */
.what p {
	max-width: 500px; /* Keeps lines readable */
	/* Prevents text from stretching too wide */
}

/* =========================================================
   CATEGORY SECTIONS / THUMBS / OVERLAYS / BUTTONS
   ========================================================= */

/* CATEGORIES */
/* Adds spacing below each category section */
.category {
	margin-bottom: 80px; /* Space between sections */
}

/* Header area inside category */
.category-header {
	display: flex; /* Aligns title and button horizontally */
	justify-content: space-between; /* Pushes them apart */
	align-items: center; /* Vertically centers them */
	margin-bottom: 25px; /* Space below header */
}

/* Row of thumbnails */
.thumb-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 25px;
}

.thumb-item {
	display: flex;
	flex-direction: column;
	align-items: center; /* keeps caption centered */
}

.thumb-inner {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 15px;
	overflow: hidden;
}

.overlay {
	position: absolute;
	inset: 0;
	border-radius: 25px;
	display: flex;
	align-items: center;
	justify-content: center;

	opacity: 0;
	transition: 0.3s ease;

	color: var(--black); /*changed from white*/
	font-family: "Actor", sans-serif;
	font-size: 1.7em;
	text-align: center;
	padding: 10px;
}

.thumb.yellow .overlay {
	background: rgba(250, 208, 98, 0.85);
}

.thumb.blue .overlay {
	background: rgba(165, 187, 247, 0.85);
}

.thumb.pink .overlay {
	background: rgba(245, 161, 195, 0.85);
}

.thumb.pear .overlay {
	background: rgba(205, 216, 89, 0.85);
}

.thumb.orange .overlay {
	background: rgba(245, 132, 66, 0.85);
}

.thumb:hover .overlay {
	opacity: 1;
}

.thumb-caption {
	font-family: "Actor", sans-serif;
	font-size: 1em;
	text-align: center;
	margin-top: 10px;
	padding: 10px 10px 80px 10px;
	width: 100%;
	max-width: 90%;
}

.thumb:hover img {
	animation: wiggle-thumb 0.65s ease-in-out;
}

.thumb:hover .overlay span {
	transform: translateY(0);
}

.overlay span {
	transform: translateY(10px);
	transition: 0.3s ease;
}

/* BUTTONS */

.btn {
	font-family: "Actor", sans-serif;
	padding: 12px 28px;
	border-radius: 30px;
	text-decoration: none;
	border: 1px solid var(--black);
	font-size: 0.9em;
	display: inline-block;
	width: auto;
}

/* Button hover  */
.btn:hover {
	background: white;
}

/* buttons individual   colors */
.blue {
	background: var(--blue);
}
.pear {
	background: var(--pear);
}
.pink {
	background: var(--pink);
}
.yellow {
	background: var(--yellow);
}
.orange {
	background: var(--orange);
}

/* =========================================================
   CONTACT
   ========================================================= */

/* Main contact section styling */
.contact-section {
	background: var(--beige);
	padding: 80px 20px;
	position: relative;
	overflow: hidden;
}

.contact-wrapper {
	max-width: 900px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 420px 1fr;
	align-items: start;
	column-gap: 40px;
}

.contact-left {
	max-width: 420px;
}

.contact-right {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
}

/* Contact heading */
.contact-left h2 {
	font-family: "Calistoga", serif;
	font-size: 2.8em;
	margin-bottom: 20px; /* Space below heading */
}

/* Intro paragraph in contact section */
.contact-intro {
	max-width: 420px;
	margin-bottom: 40px; /* Space below paragraph */
	font-size: 0.9em;
}

/* Contact form layout */
.contact-form {
	display: flex;
	flex-direction: column; /* Stacks vertically */
	gap: 18px; /* Space between */
	max-width: 450px; /* Limits width */
}

/* Styles input fields and text area */
.contact-form input,
.contact-form textarea {
	background: #e9e9e9;
	border: none;
	padding: 18px; /* Inner spacing */
	font-family: "Roboto Mono", monospace;
	font-size: 0.9em;
}

/* Specific textarea styling */
.contact-form textarea {
	min-height: 150px;
	resize: none; /* Prevents resizing */
}

/* Submit button */
.submit-btn {
	background: #2d2d2d;
	color: white;
	border: none;
	padding: 14px 40px; /* Inner spacing */
	width: fit-content; /* Shrinks to content width */
	font-family: "Actor", sans-serif;
	cursor: pointer; /* Shows pointer on hover */
	margin-top: 10px; /* Space above button */
}

/* Slight fade effect on hover */
.submit-btn:hover {
	opacity: 0.85; /* Makes slightly transparent */
}

.bottomflower {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 420px;
	height: auto;
	pointer-events: none;
	display: block;
}

/* NEW CONTACT LAYOUT */
.new-contact {
	max-width: 500px;
	text-align: left;
	margin: 0;
}

/* center intro text  */
.new-contact .contact-intro {
	margin: 0 auto 50px;
	max-width: 420px;
}

.contact-links {
	display: flex;
	gap: 60px;
	align-items: center;
}

.contact-link {
	text-decoration: none;
	color: inherit;
	text-align: center;
}

.contact-link img {
	width: 50px;
	display: block;
	margin: 0 auto 10px;
}

/* each clickable item */
.contact-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--black);
	font-family: "Actor", sans-serif;
}

/* =========================================================
   CONTACT ICONS
   ========================================================= */

/* istagram icon */
.icon-box {
	width: 70px;
	height: 70px;
	border: 1.5px solid var(--black);
	border-radius: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

/* INSTAGRAM */
.instagram-icon {
	width: 24px;
	height: 24px;
	border: 1.5px solid var(--black);
	border-radius: 7px;
	position: relative;
}

.instagram-icon::before {
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	border: 1.5px solid var(--black);
	border-radius: 50%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.instagram-icon::after {
	content: "";
	position: absolute;
	width: 3px;
	height: 3px;
	background: var(--black);
	border-radius: 50%;
	top: 5px;
	right: 5px;
}

/* EMAIL */
.email-icon {
	width: 24px;
	height: 16px;
	border: 1.5px solid var(--black);
	border-radius: 2px;
	position: relative;
}

.email-icon::before {
	content: "";
	position: absolute;
	top: 4px;
	left: 3px;
	width: 8px;
	height: 8px;
	border-left: 1.5px solid var(--black);
	border-bottom: 1.5px solid var(--black);
	transform: rotate(-45deg);
	transform-origin: top left;
}

.email-icon::after {
	content: "";
	position: absolute;
	top: 4px;
	right: 3px;
	width: 8px;
	height: 8px;
	border-right: 1.5px solid var(--black);
	border-bottom: 1.5px solid var(--black);
	transform: rotate(45deg);
	transform-origin: top right;
}
/* hover effect */

.contact-item:hover .icon-box {
	transform: translateY(-3px);
	transition: 0.2s ease;
}

.contact-item:hover span {
	text-decoration: underline;
}

/* =========================================================
   FOOTER
   ========================================================= */

/* Main footer background and padding */
.footer {
	background: var(--blue);
	padding: 90px 40px; /* Space around content */
}

/* Inner container to center footer content */
.footer-inner {
	max-width: 1300px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
}

/* Left aligned logo circle in footer */
.logo-circle {
	width: 80px; /* Width of circle */
	height: 80px; /* Height of circle */
	background: var(--pear);
	border-radius: 50%; /* Make a circle */
	display: flex; /* Allows centering text */
	align-items: center; /* Vertical centering */
	justify-content: center; /* Horizontal centering */
	font-family: "Calistoga", serif;
	font-size: 2em;
	color: var(--black);
}

/* Centred content area in footer */
.footer-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* Social links row in footer */
.footer-social {
	display: flex; /* Side by side layout */
	justify-content: center; /* Centre horizontally */
	gap: 80px; /* Space between social icons */
	font-family: "Actor", sans-serif;
	margin-bottom: 40px; /* Space below icons */
}

/* Back to top link styling */
.back-to-top a {
	font-size: 0.8em;
	font-family: "Roboto Mono", monospace;
	color: var(--black);
	text-decoration: none;
}

/* =========================================================
   PROJECT PAGE STRUCTURE
   ========================================================= */

/* Main project page heading */
.project-intro h1 {
	max-width: 900px; /* Limit width so text does not stretch*/
}

/* Grid layout for project page sections */
.project-grid {
	max-width: 1300px;
	width: 100%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 60px;
}

/* Wider text blocks */
.project-wide {
	max-width: 1300px;
	width: 100%;
	margin: 0 auto;
}

/* Container for project images */
.project-images {
	display: flex; /* Use flexbox */
	flex-direction: column; /* Stack images vertically */
	gap: 25px; /* Space between images */
}

/* Project text block styling */
.project-text {
	padding: 35px 35px 40px; /* Padding inside block */
}

/* Paragraphs inside project text blocks */
.project-text p {
	max-width: 520px;
}

/* Wider text blocks */
.project-wide {
	max-width: 700px;
	margin: 0 auto; /* Center horizontally */
}

/* Diamond shaped divider */
.diamond-divider {
	display: flex; /*align diamonds */
	justify-content: center; /* Center horizontally */
	gap: 16px; /* Space between diamonds */
	margin: 45px auto; /* Vertical spacing and center */
}

/* Individual diamond span */
.diamond-divider span {
	width: 12px;
	height: 12px;
	background: var(--indigo);
	transform: rotate(45deg); /* Rotate square to diamond shape */
	display: block; /* Make it a block element */
}

/* Explore more section heading */
.explore-more h2 {
	text-align: center; /* Center the text */
	margin-bottom: 50px; /* Space below heading */
}

/* Headings inside project text blocks */
.project-text h3 {
	padding-bottom: 0.3em; /* Space below heading */
}

/* Compact version of contact section on project pages */
.project-page .contact-section.compact {
	padding: 80px 20px 60px; /* Reduce padding for compact version */
}

/* Wrapper for compact contact section */
.project-page .contact-wrapper.compact {
	display: flex; /* Flexbox layout */
	justify-content: center; /* Center content horizontally */
}

/* Left side content for compact contact */
.project-page .contact-left.compact {
	max-width: 520px; /* Limit width */
	text-align: center; /* Center text */
}

/* Heading in compact contact section */
.project-page .contact-left.compact h2 {
	font-size: 2.2em; /* Slightly smaller heading */
	margin-bottom: 15px; /* Space below heading */
}

/* Intro text in compact contact section */
.project-page .contact-intro.compact {
	margin: 0 auto 35px; /* Center text and spacing below */
	font-size: 0.9em; /* Smaller font size */
	max-width: 420px; /* Limit width */
}

/* Contact form for compact layout */
.project-page .contact-form.compact {
	margin: 0 auto; /* Center form */
	align-items: center; /* Center items vertically in form */
}

/* Inputs and textarea in compact contact form */
.project-page .contact-form.compact input,
.project-page .contact-form.compact textarea {
	width: 100%; /* Take full width of container */
}

/* PROJECT PAGW - INTRO SECTION */

.project-block {
	padding: 60px 30px;
}

.project-block {
	max-width: 1300px;
	width: 100%;
	margin: 0 auto;
	padding: 60px 20px;
}

.project-intro {
	background: transparent;
	padding: 80px 20px;
	text-align: left;
}

.project-intro h1 {
	font-family: "Calistoga", serif;
	font-size: 3em;
	color: var(--pine);
	margin-bottom: 10px; /* space below heading */
}

.project-intro .project-blurb {
	font-family: "Roboto Mono", monospace;
	font-size: 1em;
	max-width: 800px;
	line-height: 1.6;
	color: var(--black);
}

/* WORKING ON "NEXT" BUTTONS */
.project-nav {
	max-width: 1300px;
	margin: 60px auto;
	padding: 0 20px;
	border-top: 2px solid var(--indigo);
	padding-top: 25px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: "Actor", sans-serif;
	font-size: 0.9em;
}

.project-nav a {
	text-decoration: none;
	color: var(--black);
}

.project-nav a:hover {
	text-decoration: underline;
}

/* LAYOUT HELPERS / DIVIDERS
   */

/* SEPARATOR LINE */
/* Thin horizontal line used to separate sections */
.separator {
	height: 5px;
	background: var(--pink);
	margin: 70px 0; /* Space above and below */
	width: 100%; /* Full width */
	max-width: 2000px; /* so does not exceed container */
}

.layout-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px 30px;
	margin: 0 auto;
}

/* THUMB EFFECTS / THUMB COLOR VARIATIONS*/

/* Individual thumbnail box */

.thumb {
	display: block;
	width: 100%;
	padding: 18px;
	border-radius: 25px;
}

/* Image inside thumbnail */
.thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 15px;
}

/*   color VARIATIONS FOR THUMBNAILS */
.thumb.blue {
	background: var(--blue); /* Blue background */
}
.thumb.pear {
	background: var(--pear); /* Green background */
}
.thumb.pink {
	background: var(--pink); /* Pink background */
}
.thumb.yellow {
	background: var(--yellow); /* Yellow background */
}
.thumb.orange {
	background: var(--orange); /* Orange background */
}

/* Smooth animation for hover and click effects */
.thumb,
.thumb img {
	transition: all 0.3s ease; /* Smooth transition for movement and scaling */
}

/* Hover effect for thumbnail */
.thumb:hover {
	transform: translateY(-6px); /* Move box up slightly */
	box-shadow: 0 18px 30px rgba(0, 0, 0, 0.12); /* Add shadow */
}

/* Click / press effect */
.thumb:active {
	transform: translateY(-2px); /* Moves down  */
	box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15); /* Shadow smaller */
}

/* Category   color glow effect */
.thumb.blue:hover {
	box-shadow: 0 18px 30px rgba(165, 187, 247, 0.4); /* Blue glow */
}
.thumb.pear:hover {
	box-shadow: 0 18px 30px rgba(205, 216, 89, 0.4); /* Green glow */
}
.thumb.pink:hover {
	box-shadow: 0 18px 30px rgba(245, 161, 195, 0.4); /* Pink glow */
}
.thumb.orange:hover {
	box-shadow: 0 18px 30px rgba(245, 132, 66, 0.4); /* Orange glow */
}
.thumb.yellow:hover {
	box-shadow: 0 18px 30px rgba(250, 208, 98, 0.4); /* Yellow glow */
}

/* Accessibility: focus outline for keyboard navigation */
.thumb a:focus {
	outline-offset: 4px; /* Space outside box */
}

/* =========================================================
   MASONRY / CATEGORY LANDING PAGE
   ========================================================= */

/*  */
.masonry-grid {
	column-count: 3;
	column-gap: 25px;
}

.masonry-item {
	display: block;
	margin-bottom: 25px;
	break-inside: avoid;
}

.masonry-item img {
	width: 100%;
	/* border-radius: 15px; */
	display: block;
	transition: 0.3s ease;
}

.masonry-item:hover img {
	animation: wiggle-image 0.65s ease-in-out;
	/* border-radius: 15px; */
}

.masonry-inner {
	position: relative;
	overflow: hidden;
	/* border-radius: 15px; */
}

.masonry-inner img {
	display: block;
	width: 100%;
	/* border-radius: 0; */
}

.masonry-item .overlay {
	position: absolute;
	inset: 0;

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

	border-radius: inherit;

	opacity: 0;
	transition: 0.3s ease;

	color: white;
}

.masonry-item.pink .overlay {
	background: rgba(245, 161, 195, 0.85);
}

.masonry-item.orange .overlay {
	background: rgba(245, 132, 66, 0.85);
}

.masonry-item.blue .overlay {
	background: rgba(165, 187, 247, 0.85);
}

.masonry-item.yellow .overlay {
	background: rgba(250, 208, 98, 0.85);
}

.masonry-item.indigo .overlay {
	background: rgba(163, 139, 232, 0.85);
}

.masonry-item.pear .overlay {
	background: rgba(205, 216, 89, 0.85);
}

.masonry-item.black .overlay {
	background: rgba(19, 19, 19, 0.75);
}

.masonry-item.beige .overlay {
	background: rgba(241, 238, 230, 0.85);
}

/* fixed hover trigger */
.masonry-item:hover .overlay {
	opacity: 1;
}

.masonry-item .overlay span {
	transform: translateY(10px);
	transition: 0.3s ease;
}

.masonry-item:hover .overlay span {
	transform: translateY(0);
}

/* =========================================================
   PROCESS / PROJECT PAGE GALLERIES
   ========================================================= */

/* process work on project pages  */
.process-gallery {
	padding: 40px 30px 60px;
}

.process-gallery-wrap {
	max-width: 1300px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 2.2fr 1fr;
	gap: 60px;
	align-items: start;
}

.process-image img {
	width: 100%;
	height: auto;
	display: block;
}

.process-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

.process-text h3 {
	margin: 0 0 10px 0;
	padding: 0;
}

.process-text p {
	margin: 0;
	max-width: 480px;
}

.process-image-stack {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.process-image-stack img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 15px;
}

.horiz-mockup-stack {
	display: flex;
	flex-direction: column;
	gap: 35px;
}

.horiz-mockup-stack img {
	width: 100%;
	height: auto;
	display: block;
}

.process-text-stack {
	display: flex;
	flex-direction: column;
	gap: 110px;
	padding-top: 0;
}

.process-text-block h3 {
	margin-bottom: 10px;
	padding-bottom: 0;
}

.process-text-block p {
	margin-bottom: 0;
	max-width: 420px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* Change styles for smaller screens */
@media (max-width: 768px) {
	.contact-section {
		padding: 80px 20px; /* Less padding on mobile */
	}
	.contact-left h2 {
		font-size: 2.2em; /* Smaller heading on mobile */
	}
	.footer-social {
		flex-wrap: wrap;
	}
}

@media (max-width: 900px) {
	.hero {
		flex-direction: column; /* Stack hero image and text */
		text-align: left; /* Left align text */
	}

	.thumb-row {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 1300px) {
	.project-grid {
		grid-template-columns: 1fr; /* Single column on smaller screens */
	}

	.project-text p {
		max-width: 100%; /* Paragraphs take full width */
	}
}

/* RESPONSIVE ADJUSTMENTS */
@media (max-width: 1300px) {
	.project-intro h1 {
		font-size: 2.5em; /* smaller on tablet */
	}

	.project-intro .project-blurb {
		font-size: 0.95em;
		max-width: 100%;
	}
}

@media (max-width: 600px) {
	.project-intro h1 {
		font-size: 2em; /* smaller on mobile */
	}

	.project-intro .project-blurb {
		font-size: 0.9em;
		padding: 0 10px; /* prevent edges from touching screen */
	}
}

@media (max-width: 1300px) {
	.masonry-grid {
		column-count: 2;
	}
}

@media (max-width: 768px) {
	.masonry-grid {
		column-count: 1;
	}
}

@media (max-width: 1300px) {
	.process-row {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.process-text p {
		max-width: 100%;
	}
}

@media (max-width: 1300px) {
	.process-gallery-wrap {
		grid-template-columns: 1fr;
	}

	.process-text-stack {
		gap: 40px;
	}

	.process-text p {
		max-width: 100%;
	}
}

.process-paired {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 80px;
}

.process-pair {
	display: grid;
	grid-template-columns: 2.2fr 1fr;
	gap: 60px;
	align-items: start;
}

.process-pair img {
	width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 900px) {
	.process-pair {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* =========================================================
   PROJECT HERO GRID (2x2)
   ========================================================= */

.project-hero {
	max-width: 1300px;
	width: 100%;
	margin: 0 auto;
	padding: 0 20px 60px;
}

.project-hero-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 25px; /* matches your masonry + thumb spacing */
}

.project-hero-item {
	width: 100%;
	aspect-ratio: 4 / 3; /* keeps everything consistent */
	overflow: hidden;
}

.project-hero-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* WOEKSHOPPING DOODLE BACKGROUND SYSTEM STILL, NOT ON EVERY PAGE YET */

.doodle {
	position: absolute;
	width: 300px;
	opacity: 0.12;
	pointer-events: none;
	z-index: 0;
}

/* content stays above doodles */
.header,
.wrapper,
.project-block,
.project-hero,
.project-intro,
.diamond-divider,
.contact-section,
.footer {
	position: relative;
	z-index: 2;
}

/* make section backgrounds transparent so doodles can show around them */
.project-block,
.project-intro,
.project-hero,
.contact-section {
	background: transparent;
}

/* INDIVIDUAL DOODLE POSITIONS */

.d1 {
	top: 5%;
	left: 3%;
	transform: rotate(-10deg) scale(0.9);
}
.d2 {
	top: 10%;
	right: 5%;
	transform: rotate(12deg);
}
.d3 {
	top: 15%;
	left: 8%;
	transform: rotate(-6deg) scale(0.8);
}
.d4 {
	top: 20%;
	right: 10%;
	transform: rotate(8deg);
}
.d5 {
	top: 25%;
	left: 4%;
	transform: rotate(-12deg);
}
.d6 {
	top: 30%;
	right: 6%;
	transform: rotate(15deg);
}
.d7 {
	top: 35%;
	left: 12%;
	transform: rotate(-4deg);
}
.d8 {
	top: 40%;
	right: 4%;
	transform: rotate(10deg);
}
.d9 {
	top: 45%;
	left: 6%;
	transform: rotate(-8deg);
}
.d10 {
	top: 50%;
	right: 12%;
	transform: rotate(6deg);
}
.d11 {
	top: 55%;
	left: 14%;
	transform: rotate(-15deg);
}
.d12 {
	top: 60%;
	right: 7%;
	transform: rotate(12deg);
}
.d13 {
	top: 2600px;
	left: 3%;
	transform: rotate(-5deg);
}
.d14 {
	top: 2800px;
	right: 4%;
	transform: rotate(9deg);
}
.d15 {
	top: 3000px;
	left: 10%;
	transform: rotate(-10deg);
}
.d16 {
	top: 3200px;
	right: 11%;
	transform: rotate(14deg);
}
.d17 {
	top: 3400px;
	left: 5%;
	transform: rotate(-7deg);
}
.d18 {
	top: 3600px;
	right: 8%;
	transform: rotate(11deg);
}
.d19 {
	top: 3800px;
	left: 13%;
	transform: rotate(-12deg);
}

/* IMAGE HOVER WIGGLE */

@keyframes wiggle-image {
	0% {
		transform: rotate(0deg) scale(1);
	}

	25% {
		transform: rotate(-2deg) scale(1.03);
	}

	50% {
		transform: rotate(2deg) scale(1.03);
	}

	75% {
		transform: rotate(-1deg) scale(1.03);
	}

	100% {
		transform: rotate(0deg) scale(1);
	}
}

@keyframes wiggle-thumb {
	0% {
		transform: rotate(0deg) scale(1);
	}

	25% {
		transform: rotate(-2deg) scale(1.04);
	}

	50% {
		transform: rotate(2deg) scale(1.04);
	}

	75% {
		transform: rotate(-1deg) scale(1.04);
	}

	100% {
		transform: rotate(0deg) scale(1);
	}
}

/* keep nav dropdown above project images */
.header {
	position: relative;
	z-index: 99999;
}

.header-inner,
.nav,
.dropdown {
	position: relative;
	z-index: 99999;
}

.dropdown-menu,
.submenu-content {
	z-index: 100000;
}

#campaign,
#identity,
#expressions,
#social,
#guerilla {
	scroll-margin-top: 140px;
}

/* ABOUT PAGE 2 COLUMN GRID */

.about-text {
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 20px 80px;
}

.about-text-inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 60px;
	max-width: 900px;
	margin: 0 auto;
	align-items: stretch;
}

.about-col {
	display: flex;
	flex-direction: column;
	gap: 1.2em;
	justify-content: center;
}

.about-divider {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 16px;
}

.about-divider span {
	width: 12px;
	height: 12px;
	background: var(--indigo);
	transform: rotate(45deg);
	display: block;
}

@media (max-width: 800px) {
	.about-text-inner {
		grid-template-columns: 1fr;
	}

	.about-divider {
		display: none;
	}
}

.project-intro h3 a {
	text-decoration: underline;
}

.project-intro h3 a:hover {
	opacity: 0.7;
}

/* STILL WORKSHOPPING THIS */
/*LIGHTBOX*/

.lightbox {
	position: fixed;
	inset: 0;
	background: rgba(19, 19, 19, 0.85);
	display: flex;
	align-items: flex-start; /* allows scrolling */
	justify-content: center;

	opacity: 0;
	pointer-events: none;
	transition: 0.3s ease;

	z-index: 1000000;
	padding: 80px 40px;
	overflow: auto; /* enables scroll when zoomed */
}

/* show when clicked */
.lightbox:target {
	opacity: 1;
	pointer-events: auto;
}

/* background click area (to close) */
.lightbox-bg {
	position: absolute;
	inset: 0;
	cursor: zoom-out;
}

/* enlarged image */
.lightbox img {
	width: auto;
	height: auto;
	max-width: 90vw;
	max-height: none; /*  vertical expansion */
	object-fit: contain;

	position: relative;
	z-index: 2;

	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
	border-radius: 12px;

	cursor: zoom-in;
	transition: transform 0.3s ease;
	transform-origin: center top;
}

/* zoom on hover */
.lightbox img:hover {
	transform: scale(1.4);
	cursor: zoom-out;
}

/* ABOUT PAGE DROPDOWN FIX */
.homepage .header {
	position: relative;
	z-index: 999999;
}

.homepage .header-inner,
.homepage .nav,
.homepage .dropdown {
	position: relative;
	z-index: 999999;
}

.homepage .dropdown-menu,
.homepage .submenu-content {
	z-index: 1000000;
}

/* TWEAKS */

/* KEEP DOODLES BEHIND PAGE CONTENT */
.doodle {
	z-index: 0;
}

/* KEEP REGULAR PAGE CONTENT ABOVE DOODLES */
.wrapper,
.project-block,
.project-hero,
.project-intro,
.process-gallery,
.process-paired,
.process-pair,
.process-gallery-wrap,
.contact-section,
.footer {
	position: relative;
	z-index: 2;
}

/* KEEP HEADER AND DROPDOWN ABOVE EVERYTHING */
.header,
.header-inner,
.nav,
.dropdown {
	position: relative;
	z-index: 999999;
}

.dropdown-menu,
.submenu-content {
	z-index: 1000000;
}

/* COMING SOON FINAL CENTER FIX */

.coming-soon {
	max-width: 1300px;
	width: 100%;
	min-height: 65vh;
	margin: 0 auto;
	padding: 40px 20px;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	text-align: center;
}

.coming-soon .caption,
.coming-soon .coming-title,
.coming-soon .coming-text,
.coming-soon .diamond-divider,
.coming-soon .btn {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.coming-text {
	max-width: 480px;
}

.coming-title {
	padding: 0;
	animation: floaty 4s ease-in-out infinite;
}

@keyframes floaty {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-6px);
	}
	100% {
		transform: translateY(0);
	}
}

/* trouleshooting */
.coming-soon {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	margin: 0 auto !important;
}

#contact-form {
	scroll-margin-top: 180px;
}

/* keep doodles visible but stop them from creating page height */
.doodle {
	position: absolute;
	width: 300px;
	opacity: 0.12;
	pointer-events: none;
	z-index: 0;
}

/* remove beige after footer */
.footer {
	margin-bottom: 0;
}

/*  SCROLL  */

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body {
	background: var(--beige);
	font-family: "Roboto Mono", monospace;
	color: var(--black);
	line-height: 1.6;
	margin: 0;
	font-size: 1em;
	overflow-x: hidden;
}

/* ABOUT PAGE WRAPPER */
/* Keep doodles from creating extra page scroll */
.page-wrap {
	position: relative;
	overflow: hidden;
}

/* Doodles stay decorative and do not create clickable/scrollable areas */
.doodle {
	position: absolute;
	width: 300px;
	opacity: 0.12;
	pointer-events: none;
	z-index: 0;
	max-width: none;
}

/* MOBILE DETAILS NAV*/

nav.desktop-nav {
	display: flex;
}

details.mobile-nav {
	display: none;
}

@media screen and (max-width: 900px) {
	/* hide desktop */
	nav.desktop-nav {
		display: none;
	}

	/* show mobile */
	details.mobile-nav {
		display: block;
		position: relative;
		z-index: 4;
	}

	/* header layout */
	.header {
		position: relative;
		overflow: visible;
		z-index: 999999;
	}

	.header-inner {
		position: relative;
		overflow: visible;
		padding: 16px 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	/* logo */
	.logo {
		width: 64px;
		min-width: 64px;
		flex-shrink: 0;
		display: block;
		position: relative;
		z-index: 3;
	}

	.logo img {
		width: 100%;
		height: auto;
		display: block;
	}

	/* hamburger */
	summary.hamburger {
		list-style: none;
		cursor: pointer;
		width: 40px;
		height: 36px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	summary.hamburger::-webkit-details-marker {
		display: none;
	}

	summary.hamburger::marker {
		content: "";
		display: none;
	}

	summary.hamburger span {
		display: block;
		width: 36px;
		height: 3px;
		background: var(--black);
		border-radius: 99px;
		margin: 4px 0;
	}

	/* dropdown panel */
	.mobile-menu {
		position: absolute;
		top: calc(100% + 20px);
		right: 0;
		width: min(320px, 85vw);

		background: white;
		border: 3px solid var(--indigo);
		border-radius: 22px;
		padding: 18px 20px;

		z-index: 5;
	}

	/* reset default browswer crap*/
	.mobile-menu a,
	.mobile-menu summary {
		display: block;
		padding: 10px 0;
		color: var(--black);
		font-family: "Roboto Mono", monospace;
		font-size: 1em;
		cursor: pointer;

		padding-left: 0;
		margin-left: 0;
		text-indent: 0;
		list-style: none;
	}

	.mobile-menu summary::-webkit-details-marker {
		display: none;
	}

	.mobile-menu summary::marker {
		content: "";
		display: none;
	}

	/* TOP LEVEL ALIGNMENT (About / Portfolio / Contact) */
	.mobile-menu > a,
	.mobile-menu > details > summary {
		padding-left: 0;
		margin-left: 0;
		font-weight: 500;
	}

	/* remove indent on first level */
	.mobile-menu > details {
		margin-left: 0;
	}

	/* indent ONLY nested dropdowns */
	.mobile-menu details details {
		padding-left: 14px;
	}
}

/* MOBILE NAV TYPOGRAPHY HIERARCHY*/

/* LEVEL 1 About Portfolio Contact */
.mobile-menu > a,
.mobile-menu > details > summary {
	font-weight: 700;
}

/* underline on tap (active ) */
.mobile-menu > a:active,
.mobile-menu > details > summary:active {
	text-decoration: underline;
}

/* LEVEL 2 Layout / Identities / etc */
.mobile-menu details > details > summary {
	font-weight: 600;
	font-size: 0.95em;
	opacity: 0.9;
}

/* subtle interaction */
.mobile-menu details > details > summary:active {
	text-decoration: underline;
}

/* LEVEL 3 project links */
.mobile-menu details details a {
	font-weight: 400;
	font-size: 0.9em;
	opacity: 0.75;
}

/* softer hover/tap */
.mobile-menu details details a:active {
	text-decoration: underline;
	opacity: 1;
}

/* MOBILE WIDTH / CUTOFF ??*/

@media screen and (max-width: 900px) {
	html,
	body {
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
	}

	.page-wrap {
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
	}

	.wrapper {
		width: 100%;
		max-width: 100%;
		padding-left: 20px;
		padding-right: 20px;
	}

	/* headshot circle cutting off */
	.hero {
		width: 100%;
		max-width: 100%;
		padding: 50px 20px;
		overflow: hidden;
	}

	.hero-image {
		width: 85vw;
		min-width: 0;
		max-width: 360px;
		height: auto;
		margin: 0 auto;
	}

	.hero-text {
		width: 100%;
		max-width: 100%;
	}

	/* project grids on mobile */
	.project-hero,
	.project-block,
	.project-intro,
	.about-text,
	.coming-soon {
		width: 100%;
		max-width: 100%;
		overflow: hidden;
	}

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

	/* contact section cutting off */
	.contact-section {
		width: 100%;
		max-width: 100%;
		overflow: hidden;
		padding: 70px 20px;
	}

	.contact-wrapper {
		width: 100%;
		max-width: 100%;
		display: grid;
		grid-template-columns: 1fr;
		gap: 40px;
		padding-left: 0;
		padding-right: 0;
	}

	.contact-left {
		width: 100%;
		max-width: 100%;
	}

	.contact-left h2 {
		font-size: 2.2em;
		line-height: 1.1;
		word-break: normal;
	}

	.contact-intro {
		width: 100%;
		max-width: 100%;
		font-size: 0.9em;
	}

	.contact-links {
		width: 100%;
		max-width: 100%;
		gap: 35px;
		flex-wrap: wrap;
	}

	.contact-right {
		display: none;
	}

	.bottomflower {
		display: none;
	}
}

.mobile-menu summary a {
	display: inline-block;
	width: 100%;
	color: inherit;
	text-decoration: none;
}