/* --- Global & Base Styles --- */
	:root {
		--primary-font: 'Libre Franklin', sans-serif; /* Bold, strong for headlines/titles */
		--secondary-font: 'Playfair Display', serif; /* Elegant, often for names/accents */
		--body-font: 'Libre Franklin', sans-serif; /* Clean, readable for body text */

		--bg-color: #faf9f6;
		--text-main: #1a1a1a;
		--accent: #d4a373;
		--glass: rgba(255, 255, 255, 0.8);
		--radius: 16px;
		
		--accent-color: #4C6F4D; /* Velvet Hunter Green - Strong Accent */
		--text-dark: #222;
		--text-light: #555;
		--background-light: #fefefe;
		--background-medium: #f2f2f2;
		--border-color: #ddd;
		--white: #ffffff;
		--black: #000000;
	}

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

	html {
		scroll-behavior: smooth;
	}

	body {
		font-family: var(--body-font);
		color: var(--text-dark);
		line-height: 1.7; /* Slightly more spacious line height for readability */
		background-color: var(--background-light);
		-webkit-font-smoothing: antialiased; /* Smoother font rendering */
		-moz-osx-font-smoothing: grayscale;
	}

	.container {
		max-width: 1100px; /* Slightly narrower for a more focused layout */
		margin: 0 auto;
		padding: 0 25px; /* More padding on the sides */
	}

	/* --- Typography --- */
	h1, h2, h3, h4, h5, h6 {
		font-family: var(--primary-font);
		font-weight: 700;
		color: var(--black); /* Stronger black for headings */
		line-height: 1.2;
	}

	.hero-name {
		font-family: var(--secondary-font); /* Elegant font for the name */
		font-size: 5.5em; /* Very large */
		margin-bottom: 0.2em;
		color: var(--white);
		text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
		font-weight: 700;
		letter-spacing: -2px; /* Tighter letter spacing */
	}

	.section-title {
		font-size: 2.8em;
		text-align: center;
		margin-bottom: 60px;
		padding-bottom: 15px;
		position: relative;
		letter-spacing: -1px;
	}

	.section-title::after { /* Underline effect */
		content: '';
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		width: 80px;
		height: 3px;
		background-color: var(--accent-color);
	}

	p {
		margin-bottom: 1.2em;
		font-size: 1.05em;
		color: var(--text-dark);
	}

	a {
		color: var(--accent-color);
		text-decoration: none;
		transition: color 0.3s ease;
	}

	a:hover {
		color: var(--text-dark);
	}

	/* --- Side Navigation --- */
	.side-nav {
		position: fixed;
		right: 30px; /* Slightly more off the edge */
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		flex-direction: column;
		z-index: 1000;
		background-color: rgba(255, 255, 255, 0.95);
		border-radius: 5px; /* Sharper corners */
		box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
		padding: 10px 0;
	}

	.nav-item {
		display: block;
		width: 48px; /* Slightly larger boxes */
		height: 48px;
		margin: 6px 0;
		background-color: transparent; /* No background by default */
		color: var(--text-light); /* Muted icon color */
		border-radius: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 1.5em;
		transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
		border: 1px solid transparent; /* Subtle border */
	}

	.nav-item:hover, .nav-item.active {
		background-color: var(--accent-color);
		color: var(--white);
		transform: scale(1.05); /* Gentle hover effect */
		border-color: var(--accent-color);
	}

	/* --- Hero Section --- */
	.hero-section {
		position: relative;
		height: 100vh;
		display: flex;
		align-items: center;
		color: var(--white);
		text-align: left; /* Text aligns left */
		overflow: hidden;
		background-image: url('https://picsum.photos/1920/1080?random=14'); /* Editorial placeholder */
		background-size: cover;
		background-position: center 30%; /* Adjust focus of image */
		background-attachment: fixed;
	}

	.hero-section::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 20%, rgba(0, 0, 0, 0.2) 70%, transparent 100%); /* Gradient overlay */
	}

	.hero-content {
		position: relative;
		z-index: 1;
		max-width: 800px; /* Constrain content width */
		padding-left: 50px; /* More padding from left edge */
	}

	.hero-content .niches {
		font-family: var(--primary-font);
		font-size: 1.4em;
		margin-bottom: 35px;
		font-weight: 400;
		letter-spacing: 0.5px;
		text-transform: uppercase; /* Magazine style */
		color: rgba(255, 255, 255, 0.9);
	}

	.social-handles {
		display: flex;
		justify-content: flex-start; /* Align left */
		gap: 30px;
		padding-top: 15px;
		border-top: 1px solid rgba(255, 255, 255, 0.4); /* Subtle separator */
	}

	.social-link {
		color: var(--white);
		font-size: 1.1em;
		text-decoration: none;
		transition: color 0.3s ease, transform 0.3s ease;
		display: flex;
		align-items: center;
		font-weight: 300;
	}

	.social-link i {
		margin-right: 10px;
		font-size: 1.4em;
		color: var(--accent-color); /* Green icons */
	}

	.social-link:hover {
		color: var(--accent-color);
		transform: translateY(-3px);
	}

	/* --- Section Base Styles --- */
	section {
		padding: 100px 0; /* More vertical padding */
		min-height: 80vh; /* Allow sections to be shorter than viewport if content is small */
		display: flex;
		align-items: center;
	}

	section:nth-of-type(even) {
		background-color: var(--background-medium);
	}

	/* --- Bio Section --- */
	.bio-section {
		text-align: left;
		background-color: var(--white);
	}

	.bio-grid {
		display: grid;
		grid-template-columns: 1fr 1.5fr; /* Image on left, text on right, text wider */
		gap: 60px; /* More space */
		align-items: center;
	}

	.bio-image {
		width: 100%;
		height: 500px; /* Fixed height for impact */
		background-size: cover;
		background-position: center;
		border-radius: 8px; /* Slightly rounded corners */
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	}

	.bio-text p:last-child {
		margin-bottom: 0;
	}

	/* --- Portfolio Section --- */
	.portfolio-section {
		background-color: var(--background-medium);
	}

	.stats-overview {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 40px;
		margin-bottom: 80px; /* More space before grid */
		text-align: center;
	}

	.stat-box {
		background-color: var(--white);
		padding: 35px 25px;
		border-radius: 8px;
		box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		border-bottom: 4px solid var(--accent-color); /* Green accent */
	}

	.stat-box:hover {
		transform: translateY(-8px);
		box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
	}

	.stat-number {
		font-family: var(--primary-font);
		font-size: 3.5em;
		font-weight: 700;
		color: var(--accent-color);
		display: block;
		margin-bottom: 5px;
	}

	.stat-label {
		font-family: var(--primary-font);
		font-size: 1.2em;
		font-weight: 600;
		color: var(--text-dark);
		display: block;
		margin-bottom: 5px;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}

	.stat-sublabel {
		font-size: 0.9em;
		color: var(--text-light);
	}

	.bento-grid-portfolio {
		display: grid;
		grid-template-columns: repeat(3, 1fr); /* Fixed 3 columns for desktop */
		grid-auto-rows: minmax(280px, auto); /* Taller rows */
		gap: 25px;
	}

	.grid-item-portfolio {
		background-color: var(--border-color);
		border-radius: 8px;
		overflow: hidden;
		background-size: cover;
		background-position: center;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		cursor: pointer;
		position: relative;
	}

	.grid-item-portfolio::before { /* Subtle overlay on hover */
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(76, 111, 77, 0);
		transition: background 0.3s ease;
	}

	.grid-item-portfolio:hover::before {
		background: rgba(76, 111, 77, 0.2);
	}

	.grid-item-portfolio:hover {
		transform: scale(1.02);
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
	}

	.large-item {
		grid-column: span 2; /* Takes up two columns */
		/* On desktop, some might be span 2 rows as well, or just wider */
	}


		/* --- UGC Gallery --- */
		.section-header {
            text-align: center;
            margin-bottom: 50px;
        }

        .section-header h2 {
            font-family: 'Playfair Display', serif;
            font-size: 3rem;
            font-weight: 400;
            letter-spacing: -0.02em;
            margin-bottom: 10px;
        }

        .section-header p {
            font-size: 1rem;
            color: #666;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        /* Bento Grid Core */
        .ugc-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(2, 300px);
            gap: 20px;
        }

        .bento-item {
            position: relative;
            border-radius: var(--radius);
            overflow: hidden;
            background-color: #eee;
            transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        .bento-item:hover {
            transform: translateY(-5px);
        }

        /* Responsive Bento Spans */
        .item-1 { grid-column: span 2; grid-row: span 2; } /* Large Hero */
        .item-2 { grid-column: span 1; grid-row: span 1; }
        .item-3 { grid-column: span 1; grid-row: span 1; }
        .item-4 { grid-column: span 2; grid-row: span 1; } /* Wide */

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

        /* Caption Styling */
        .caption {
            position: absolute;
            bottom: 15px;
            left: 15px;
            right: 15px;
            background: var(--glass);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            padding: 12px 18px;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .caption p {
            font-size: 0.85rem;
            font-weight: 500;
            color: #333;
        }

        .caption span {
            font-size: 0.75rem;
            color: var(--accent);
            display: block;
            margin-top: 2px;
        }

        /* Tablet Layout */
        @media (max-width: 900px) {
            .ugc-grid {
                grid-template-columns: repeat(2, 1fr);
                grid-template-rows: auto;
            }
            .item-1, .item-2, .item-3, .item-4, .item-5 {
                grid-column: span 1;
                grid-row: span 1;
                height: 350px;
            }
        }

        /* Mobile Layout */
        @media (max-width: 600px) {
            .ugc-grid {
                grid-template-columns: 1fr;
            }
            .section-header h2 {
                font-size: 2.2rem;
            }
        }


	/* --- Work With Me Section --- */
	.work-with-me-section {
		text-align: center;
		background-color: var(--white);
	}

	.cta-text {
		max-width: 700px;
		margin: 0 auto 50px auto;
		font-size: 1.2em;
		font-weight: 300;
		color: var(--text-dark);
	}

	.contact-details {
		margin-top: 40px;
		margin-bottom: 60px;
		font-size: 1.15em;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 15px; /* Spacing between contact lines */
	}

	.contact-details p {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 0;
		color: var(--text-dark);
	}

	.contact-details p span {
		font-weight: 500;
		color: var(--black);
	}

	.contact-details i {
		color: var(--accent-color);
		font-size: 1.6em;
	}

	.cta-button {
		background-color: var(--accent-color);
		color: var(--white);
		padding: 18px 40px;
		border: none;
		border-radius: 5px;
		font-family: var(--primary-font);
		font-size: 1.3em;
		font-weight: 600;
		cursor: pointer;
		transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
		letter-spacing: 0.5px;
		text-transform: uppercase;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	}

	.cta-button:hover {
		background-color: #3f5a40;
		transform: translateY(-5px);
		box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
	}

	/* --- Footer --- */
	.footer {
		background-color: var(--black);
		color: rgba(255, 255, 255, 0.7);
		text-align: center;
		padding: 30px 0;
		font-size: 0.9em;
	}

	.footer .container p{
		color: rgba(255, 255, 255, 1);
	}

	/* --- Responsive Design (New York Magazine tends to be mobile-first) --- */
	@media (max-width: 1024px) {
		.container {
			padding: 0 20px;
		}

		.hero-name {
			font-size: 4.5em;
		}

		.hero-content {
			padding-left: 30px;
		}

		.section-title {
			font-size: 2.2em;
		}

		.bio-grid {
			grid-template-columns: 1fr; /* Stack on smaller screens */
			gap: 40px;
		}

		.bio-image {
			height: 400px;
		}

		.bento-grid-portfolio {
			grid-template-columns: repeat(2, 1fr); /* 2 columns for tablets */
			grid-auto-rows: minmax(250px, auto);
		}

		.large-item {
			grid-column: span 1; /* Large items become single column */
		}

		.carousel-item {
			width: 280px;
			height: 380px;
			margin: 0 10px;
		}
	}

	@media (max-width: 768px) {
		.side-nav {
			right: 15px;
			padding: 8px 0;
		}

		.nav-item {
			width: 42px;
			height: 42px;
			font-size: 1.3em;
		}

		.hero-name {
			font-size: 3.5em;
		}

		.hero-content .niches {
			font-size: 1.2em;
		}

		.social-handles {
			flex-direction: column;
			gap: 15px;
			align-items: flex-start;
		}

		.section-title {
			font-size: 1.8em;
			margin-bottom: 40px;
		}

		section {
			padding: 80px 0;
		}

		.stats-overview {
			grid-template-columns: 1fr; /* Stack stats on mobile */
			gap: 25px;
			margin-bottom: 50px;
		}

		.stat-number {
			font-size: 3em;
		}

		.stat-label {
			font-size: 1.1em;
		}

		.bento-grid-portfolio {
			grid-template-columns: 1fr; /* Single column on phones */
			grid-auto-rows: minmax(280px, auto);
			gap: 20px;
		}

		.carousel-wrapper {
			max-width: 100%;
			padding: 0 10px;
		}

		.carousel-container {
			width: calc(100% - 80px); /* Smaller space for arrows */
			padding: 15px 0;
		}

		.carousel-item {
			width: 250px;
			height: 350px;
			margin: 0 8px;
		}

		.carousel-arrow {
			padding: 15px 17px;
			font-size: 1.4em;
		}

		.left-arrow {
			margin-right: 10px;
		}

		.right-arrow {
			margin-left: 10px;
		}

		.cta-text {
			font-size: 1.1em;
			margin-bottom: 40px;
		}

		.contact-details {
			font-size: 1.05em;
			gap: 10px;
			margin-bottom: 40px;
		}

		.contact-details i {
			font-size: 1.4em;
		}

		.cta-button {
			padding: 15px 30px;
			font-size: 1.1em;
		}
	}

	@media (max-width: 480px) {
		.hero-name {
			font-size: 2.8em;
			letter-spacing: -1px;
		}
		.hero-content .niches {
			font-size: 1em;
			margin-bottom: 25px;
		}
		.social-link {
			font-size: 0.95em;
		}
		.social-link i {
			font-size: 1.2em;
		}
		.side-nav {
			right: 8px;
			padding: 5px 0;
		}
		.nav-item {
			width: 38px;
			height: 38px;
			font-size: 1.1em;
			margin: 4px 0;
		}
		.section-title {
			font-size: 1.5em;
			margin-bottom: 30px;
		}
		p {
			font-size: 1em;
		}
		.bio-image {
			height: 300px;
		}
		.carousel-item {
			width: 220px;
			height: 300px;
		}
		.carousel-arrow {
			padding: 12px 14px;
			font-size: 1.1em;
		}
	}