/* ══════════════════════════════════════════════════════════
   about.css — page-specific styles extracted from the inline
   \3c style> blocks of about.html.
   Loaded where the last inline block was, preserving cascade.
   ══════════════════════════════════════════════════════════ */

/* These tokens were declared before style.css and lost to it. Kept inside a
   low-priority layer so they still lose, without dropping declarations. */
@layer page-legacy {
	:root {
		--bg: #0a0a0a;
		--text: #d0d3cd;
		--g: #647661;
		--gd: #232922;
	}
}


:root {
			--pageMaxWidth: 1100px !important;
		}
		/* .insta-location {
			font-weight: 100 !important;
		} */

/* Full Screen Hero Section */
		#about {
			margin-top: calc(-1 * (var(--navh) + 50px));
			/* padding-top: calc(var(--navh) + 50px); */
			/* padding-top: calc(var(--navh) + 30px); */
			padding: 100px 0;

			min-height: 100vh;
			min-height: 100dvh;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;
			background: transparent !important;
			border-bottom: none;
			/* border-bottom: 1px solid var(--border); */
		}

		/* body::before { background: transparent;} */
		.hero-full-bg {
			content: "";
			position: absolute;
			inset: 0;
			background: linear-gradient(rgba(255, 254, 254, 0.9) 0%, rgba(255, 254, 254, 0.9) 80%), url('https://res.cloudinary.com/dvklf4dm6/image/upload/c_scale,w_800,q_auto,f_auto/v1779252214/landing_gku5dx.jpg') center/cover no-repeat;
			/* background: linear-gradient(rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.9) 80%), url('https://res.cloudinary.com/dvklf4dm6/image/upload/c_scale,w_800,q_auto,f_auto/v1779252214/landing_gku5dx.jpg') center/cover no-repeat; */
			/* background: linear-gradient(pink 0%, rgba(10, 10, 10, 0.95) 30%), url('https://images.unsplash.com/photo-1556388158-158ea5ccacbd?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') center/cover no-repeat; */
			z-index: -1;
			-webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
			mask-image: linear-gradient(to bottom, black 5%, transparent 100%);
		}

		.about-box {
			margin-bottom: 0 !important;
			max-width: var(--pageMaxWidth);
			;
			width: 100%;
			text-align: center;
			/* padding: 0 20px; */

			padding: 20px;
			border-radius: var(--r);
			/* background: pink; */
			position: relative;
		}

		/* The Brackets */
		.about-box::before,
		.about-box::after {
			content: "";
			position: absolute;
			/* width: 30px;
			height: 30px; */
			width: 50px;
			height: 30px;
			/* Length of the bracket */
			/* Length of the bracket */
			/* border: 4px solid var(--accent); */
			border: 5px solid var(--accent);
			/* border: 4px solid var(--g); */
			/* Thickness and color */
		}

		/* Top-Left Bracket */
		.about-box::before {
			top: -5px;
			left: -5px;
			border-right: none;
			border-bottom: none;
			border-radius: var(--r) 0 0 0;
		}

		/* Bottom-Right Bracket */
		.about-box::after {
			bottom: -5px;
			right: -5px;
			border-left: none;
			border-top: none;
			border-radius: 0 0 var(--r) 0;
		}











		/* Typing Effect Cursor */
		.typing-cursor {
			display: inline-block;
			width: 0.1em;
			height: 1em;
			/* background-color: var(--accent); */
			background-color: var(--g);
			vertical-align: text-top;
			margin-left: 15px;
			animation: blink 1s step-end infinite;
		}

		@keyframes blink {

			0%,
			100% {
				opacity: 1;
			}

			50% {
				opacity: 0;
			}
		}

		/* Hero Buttons */
		.hero-buttons {
			display: flex;
			/* gap: 16px; */
			gap: 12px;
			justify-content: center;
			margin-top: 36px;
			flex-wrap: wrap;
		}

		.hero-btn {
			/* padding: 12px 28px; */
			padding: 8px 22px;
			border-radius: 10px;
			font-family: "Rubik", sans-serif;
			font-weight: 700;
			/* font-size: 13px; */
			font-size: inherit;
			letter-spacing: 0.1em;
			text-transform: uppercase;
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			cursor: pointer;
		}

		.btn-primary {
			border: 2px solid var(--g);
			/* background: var(--accent);
			border: 2px solid var(--accent); */
		}

		.btn-secondary {
			border: 2px solid var(--border);
		}

		/* Scroll Down Indicator */
		.scroll-down {
			position: absolute;
			bottom: 40px;
			left: 50%;
			transform: translateX(-50%);
			/* color: var(--tdim); */
			color: var(--tdim-fr);
			/* font-size: 24px; */
			animation: floatBounce 2.5s ease-in-out infinite;
			cursor: pointer;
			transition: color 0.3s ease;
			display: flex;
			align-items: center;
			justify-content: center;
			/* padding: 10px 50px; */

			font-size: clamp(14px, 1.2vw, 22px);
			font-weight: 700;
			gap: 10px;
			text-transform: uppercase;
		}

		.scroll-down i {
			/* font-size: 20px; */
			font-size: clamp(16px, 1.2vw, 22px);
		}

		.scroll-down:hover {
			/* color: var(--accent); */
			/* color: var(--g); */
			color: var(--tdim);
		}

		@keyframes floatBounce {

			0%,
			100% {
				transform: translate(-50%, 0);
			}

			50% {
				transform: translate(-50%, 12px);
			}
		}

		/* Bio Section */
		#bio {
			padding: 80px 4 8px;
			/* max-width: 1300px; */
			max-width: var(--pageMaxWidth);
			;
			/* background-color: pink; */
			/* align-self: center; */
			margin: 0 auto;
		}


		.bio-flex {
			display: flex;
			gap: 50px;
			align-items: center;
			flex-wrap: wrap;
		}

		.bio-img-container {
			flex-shrink: 0;
			width: 150px;
			height: 160px;
			margin: 0;
			border-radius: 50%;
			border: 4px solid color-mix(in srgb, var(--text) 40%, transparent);
			align-self: flex-start;
		}

		.bio-img-container img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transform: scale(1.1);
			transition: transform 0.3s ease-out;
		}

		.bio-img-container:hover img {
			transform: scale(1.15);
		}

		.bio-text-content {
			flex: 1;
			min-width: 300px;
		}

		/* ── LAYOUT & MARGIN ALIGNMENTS ── */
		#portfolio-overview,
		#photography {
			/* padding: 40px 48px 52px; */
			/* padding: 40px 48px; */
			/* max-width: 1300px;
			margin: 0; */
			max-width: var(--pageMaxWidth);
			margin: 0 auto;
		}

		#marquee {
			max-width: var(--pageMaxWidth);;
			margin: 0 auto;
		}

		/* ── GANTT CHART (TIMELINE) IMPROVEMENTS ── */
		.tl-wrapper {
			position: relative;
			width: 100%;
			padding: 0 16px;
			/* Extra breathing room for scrollbar */
		}

		.tlframe {
			padding-bottom: 6px;
			/* Lift scrollbar off the bottom absolute edge */
		}

		.tlframe iframe {
			/* min-width: 800px !important; */
			/* Optimizes the white space gap on the right */
			width: 100%;
		}

		/* ── PORTFOLIO OVERVIEW CARDS (Imported from portfolio) ── */
		.card-stack {
			display: flex;
			flex-direction: column;
			gap: var(--uni-gap);
			max-width: 1200px;
			grid-template-columns: 1fr 1fr 1fr 1fr !important;
		}

		.ec-card-link {
			display: block;
			text-decoration: none;
			color: inherit;
		}


		.ec-summary {
			display: grid;
			grid-template-columns: 280px 1fr;
			gap: 24px;
			position: relative;
		}

		.ec-thumb {
			position: relative;
			width: 100%;
			height: 100%;
			background: #111;
			overflow: hidden;
			min-height: 0;
		}

		.ec-thumb img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.5s ease;
		}

		.ec-card:hover .ec-thumb img {
			transform: scale(1.05);
		}

		.ec-info {
			padding: 24px 24px 24px 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.ec-title {
			font-size: clamp(18px, 1.5vw, 40px);
			font-weight: 900;
			color: var(--dimtitle);
			text-transform: uppercase;
			line-height: 1.1;
			margin-bottom: 6px;
			transition: color 0.2s ease;
		}

		/* .ec-card:hover .ec-title { */
			/* color: var(--accent2); */
			/* color: var(--g); */
			/* color: var(--g); */
		/* } */

		.ec-subtitle {
			font-size: 13px;
			font-weight: 700;
			color: var(--tdim);
			text-transform: uppercase;
			letter-spacing: 0.05em;
		}

		.ec-brief {
			font-size: clamp(13px, 0.8vw, 16px);
			line-height: 1.6;
			color: var(--dimtitle);
			margin: 12px 0 0;
			max-width: 800px;
			font-weight: 100 !important;
		}

		.insta-wrapper {
			max-width: 450px;
		}

		@media (max-height: 840px) {
			#recent-card-container {
				display: none;
			}
		}

		@media (max-width: 1050px) {
			.bio-flex {
				display: block;
			}

			.bio-img-container {
				float: left;
				shape-outside: circle(50%);
				margin: 0 20px 10px 0;
				width: 150px;
				height: 160px;
				border-radius: 50%;
				border: 4px solid color-mix(in srgb, var(--text) 40%, transparent);
			}

			#about {
				margin-top: calc(-1 * (var(--navh) + 50px));
				/* padding-top: calc(var(--navh) + 50px); */
				padding-top: calc(var(--navh) + 40px);
			}

			/* Unified mobile padding constraints */
			#bio {
				padding: 60px 22px !important;
			}

			.bio-img-container {
				width: 120px;
				height: 120px;
				/* width: 200px;
				height: 200px; */

			}

			.fw-head {
				margin-bottom: 20px !important;
			}

			#portfolio-overview,
			#marquee,
			#photography {
				/* padding: 40px 22px 52px !important; */
				padding: 40px 22px;
			}

			.bio-flex {
				justify-content: flex-start;
				text-align: left;
				flex-direction: column;
				align-items: flex-start;
				gap: 25px;
			}

			.tl-wrapper {
				/* Applies a seamless fade-out on the right side to indicate horizontal scroll capability */
				-webkit-mask-image: linear-gradient(to right, black 70%, transparent 95%);
				mask-image: linear-gradient(to right, black 70%, transparent 95%);
			}
		}

		@media (max-width: 800px) {
			.ec-summary {
				grid-template-columns: 1fr;
				gap: 0;
			}

			.ec-thumb {
				/* height: 120px; */
				height: 90px;
				min-height: auto;
			}

			.ec-info {
				padding: 20px;
			}

			.insta-wrapper {
				max-width: 100%;
			}
			.card-stack {
				grid-template-columns: 1fr 1fr !important;
			}
		}
	
		/* @media (max-width: 850px) { */
		@media (max-width: 850px),
		(max-height: 850px) {
			.scroll-down {
				display: none !important;
			}
			/* PUT SECTION HERE */
			#about {
				min-height: 100%;
				min-height: 100%;
				padding-top: 0px;
			}

			.about-box {
				padding-bottom: 40px;
			}
			.about-box::before,
			.about-box::after {
				display: none !important;
			}

			#bio {
				padding-top: 20px !important;
				padding-bottom: 0px !important;
			}

			#portfolio-overview {
				padding-bottom: 0px !important;
			}
		}

		.indexSection {
			padding-top: 60px !important;
			padding-bottom: 20px !important;
		}










/* hide scroll down button always */
		.scroll-down {
				display: none !important;
			}
			/* PUT SECTION HERE */
			#about {
				min-height: 100%;
				min-height: 100%;
				padding-top: 100px !important;
			}

			.about-box {
				padding-bottom: 40px;
			}
			.about-box::before,
			.about-box::after {
				display: none !important;
			}

			#bio {
				padding-top: 20px !important;
				padding-bottom: 0px !important;
			}

			#portfolio-overview {
				padding-bottom: 0px !important;
			}

/* Bio paragraph variants (replace repeated inline typography) */
.about-bio--lead {
  width: 100%;
  margin-top: 15px;
  font-size: clamp(16px, 1.2vw, 22px);
  line-height: 1.6;
}
.about-bio--body {
  width: 100%;
  font-size: clamp(16px, 1vw, 22px);
  line-height: 1.7;
}