/* ── TOKENS ── */
:root {
	/* --bg: #303030; */
	/* --bg: #161618; */
	/* --bg: #1e1e20; */
	--bg: #0a0a0a;
	--grad: #1a1a1a;
	/* --surface-full: #0c0c0caf; */
	/* --surface-full: #141414; */

	/* --surface: #282928; */
	--surface: #28292815;
	/* --surface: #192026; */

	--surface2: #111111;
	/* --surface2: pink; */
	--border: #444444;
	--g: #647661;
	--gd: #232922;
	--gl: #8da084;
	--gpale: rgba(100, 118, 97, 0.25);
	--accent: #c8a84b;
	--accent2: #857032;
	--accentpale: #1d1c1c;
	--highlight: #615739;
	--text: #d0d3cd;
	--contrast-text: #cacaca;
	/* --tdim: #7a7e76; */
	--tdim-fr: #7a7e76;
	--tdim: var(--cbul);
	--tmut: var(--tdim);
	/* --miniheader: var(--dimtitle); */
	/* --miniheader: #616161; */
	/* --miniheader: var(--contrast-text); */
	--miniheader: var(--cbul);
	--dull: #4f5348;
	--navh: 50px;
	/* --sw: 250px; */
	--sw: 0px;
	--sw2: 250px;
	--r: 10px;
	--anchorh: 0px;
	/* --sb: 70px; */
	--sb: 20px;
	/* --dimtitle: #888888; */
	--dimtitle: var(--contrast-text);
	--cbul: #b9b9b9;
	--bullbold: #525e44;
	--title: #ffffff;

	/* --badge: #68644c; */
	--badge: var(--bullbold);
	/* --badge: color-mix(in srgb, var(--bullbold) 70%, transparent); */
	/* --badge: var(--dull); */
	/* --badge: var(--dull); */

	--article-width: 1300px;

	--port-header: var(--g);
	/* --port-header: pink; */
	/* --port-header: var(--accent2); */
	/* --port-hover: var(--gl); */
	/* --port-hover: var(--accent); */
	--port-hover: var(--gl);

	/* --sb-active: var(--gl); */
	/* --sb-active: var(--accent2); */
	--sb-active: var(--g);
	/* --sb-hover: var(--accent); */
	/* --sb-hover: var(--g); */
	--sb-hover: var(--tdim-fr);
	--sb-active-hover: var(--sb-hover);
	--sb-text: var(--tdim);
	--sb-font-weight: 500;
	--sb-font-weight-hover: 700;
	/* --sb-font-weight-hover: 900; */
	--sb-font-weight-active: 900;

	--h2padding: 50px;
	--ec-card-lines: 2px;
	--ec-card-lines-color: var(--border);
	/* --img-gap: 7px; */
	--img-gap: 8px;
	--not-white: #b3b3b3;
	--not-black: #6b6b6b;
	/* --nav-drop: #647661cb; */
	/* --nav-drop:  #404b3fcb; */
	--nav-drop: #4c594acb;

	--sec-title: #545556;
	--dark: #313131;
	--uni-gap: 10px;
	--margin: 22px;

	/* --pageMaxWidth: 900px; */
	--pageMaxWidth: 1000px;
	--blogAlt: var(--g);
	--blogAlt2: color-mix(in srgb, var(--blogAlt) 70%, transparent);
	/* --blogAlt: #5e5741cb; */
}

* {
	-webkit-tap-highlight-color: transparent;
	tap-highlight-color: transparent;
}

/* body {
    cursor: url('/media/cursor_def.svg'), auto;
} */

/* a, button, .filter-btn, .sbn, .feed-tag-link, .ec-card, .post-arrow-btn, .cw, .lb-nav {
    cursor: url('media/cursor_hover.svg'), pointer;
} */

/* input, textarea, [contenteditable="true"] {
    cursor: url('media/cursors/typing-cursor-placeholder.svg'), text;
} */

/* .ec-card,
.ec-item, */
img,
a {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	user-select: none; /* Standard syntax */
	-webkit-user-drag: none; /* Prevents dragging images on desktop */
}

/* ── SELECTION HIGHLIGHT ── */
::selection {
	background: rgba(200, 168, 75, 0.32);
	color: #fff;
}

/* ── RESET & BASE ── */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	scroll-behavior: smooth;
}
/* body::before {
	content: "";

	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	z-index: -1;

	background-image:
		linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.8)),
		url("https://res.cloudinary.com/dvklf4dm6/image/upload/c_scale,w_800,q_auto,f_auto/PXL_20260313_233818274_zgksky.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;

	filter: blur(10px);

	transform: scale(1.05);

	transition:
		opacity 0.2s ease-in-out,
		filter 0.2s ease-in-out;
	opacity: 1;
} */
/* 1. The Squiggly Animated Color Blobs */
body::before {
	content: "";
	position: fixed;
	inset: -200px; /* Bleed past edges to prevent hard cutoffs during animation */
	z-index: -2;
	background-color: var(--bg);
	/* Layering radial gradients that we will animate */
	background-image:
		radial-gradient(circle at 20% 30%, rgba(100, 118, 97, 0.25) 0%, transparent 40%),
		radial-gradient(circle at 80% 70%, rgba(200, 168, 75, 0.2) 0%, transparent 45%),
		radial-gradient(ellipse at 60% 10%, rgba(133, 112, 50, 0.15) 0%, transparent 50%);
	/* A heavy blur turns rigid circles into organic, squiggly blobs */
	filter: blur(60px);
	/* filter: blur(100px); */
	/* animation: blobMove 20s infinite alternate ease-in-out; */
	opacity: 1;
	transition: opacity 0.2s ease-in-out;
	background-size: cover;
}

/* 2. The Small Grid Background (Aceternity Style) */
/* body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none; 
	background-size: 38px 38px;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.025) 4px, transparent 4px), 
		linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 4px, transparent 4px);
	-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
	mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
} */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-size: 20px 20px;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.025) 3px, transparent 3px), linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 3px, transparent 3px);
	-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
	mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

/* 3. The Animation Keyframes for the Blobs */
/* @keyframes blobMove {
	0% {
		background-position: 0% 0%, 0% 0%, 0% 0%;
		background-size: 100% 100%, 100% 100%, 100% 100%;
	}
	50% {
		background-position: 5% 10%, -10% -5%, 15% 5%;
		background-size: 110% 90%, 90% 110%, 105% 95%;
	}
	100% {
		background-position: -5% -10%, 10% 5%, -10% 15%;
		background-size: 95% 105%, 105% 95%, 90% 110%;
	}
} */

/* This class will temporarily drop the background opacity to 0 */
body.bg-fade-out::before {
	opacity: 0;
}

body {
	font-family: "Rubik", sans-serif;
	/* background-image: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.8)), url('https://images.unsplash.com/photo-1638555063519-d009e6f3b28b?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
	background-repeat: no-repeat; 
	background-size: cover;
	background-position: center; 
	background-attachment: fixed;
	background-color: var(--bg); */

	color: var(--text);
	font-weight: 300;
	font-size: 14px;
	line-height: 1.25;
	overflow-x: hidden;
}

/* body {
	font-family: "Rubik", sans-serif;
	background-color: var(--bg);
	background-image: 
		radial-gradient(circle at 12% 15%, rgba(100, 118, 97, 0.18) 0%, transparent 20%),
		radial-gradient(circle at 5% 85%, rgba(200, 168, 75, 0.08) 0%, transparent 20%);
	background-attachment: fixed;
	color: var(--text);
	font-weight: 300;
	font-size: 14px;
	line-height: 1.25;
	overflow-x: hidden;
} */
a {
	text-decoration: none;
	color: inherit;
}
a:hover {
	/* color: var(--accent2) !important; */
	color: var(--accent);
}
img {
	display: block;
	max-width: 100%;
}
::-webkit-scrollbar {
	/* width: 4px; */
	width: 6px;
}
::-webkit-scrollbar-track {
	/* background: var(--surface); */
	/* background: var(--bg); */
	background: transparent;
}
::-webkit-scrollbar-thumb {
	/* background: var(--g); */
	background: var(--badge);
	/* background: var(--accent); */
	border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover {
	/* background: var(--gl); */
	background: var(--g);
	/* background: var(--accent2); */
}

/* ── PERFORMANCE CONTAINMENT ── */
/* Defers rendering of off-screen elements to drastically improve FCP */
.wi,
.insta-card,
.tlbox,
.contact-card {
	content-visibility: auto;
	contain-intrinsic-size: auto 300px;
}

/* ── NAV BLUR OVERLAY ── */
#blur-page {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 998;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.8s ease;
	will-change: opacity;
}
#blur-page.visible {
	opacity: 1;
	transition: opacity 0.4s ease;
	pointer-events: auto;
}

/* ══ HEADER & NAVIGATION ── */
header {
	position: fixed;
	top: 0;
	/* left: var(--sw); */
	left: 0;
	right: 0;
	z-index: 1000;
	padding: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: transform 0.4s ease-in-out;
	pointer-events: none;
	/* padding-bottom: 100px; */
}
/* ── NEW: Gradient blur tied to the header's movements ── */
header::before {
	content: "";
	position: absolute;
	/* inset: 0; */
	top: 0;
	left: 0;
	right: 0;
	bottom: -70px; /* Pulls the gradient 60px down BELOW the navbar */

	z-index: -1; /* Puts the blur behind the nav buttons */
	pointer-events: none;
	transform: translateY(-20%);
	/* transform: translateY(-10%); */

	/* The dark gradient tint */
	/* background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 100%, transparent) 0%, transparent 100%); */

	/* The actual blur effect */
	/* backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px); */
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);

	/* A mask that fades the blur out smoothly at the bottom edge so there isn't a harsh line */
	/* -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%); */
	mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}
.mobile-box {
	display: none;
	pointer-events: all;
	width: auto !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin-right: 10px;
}
.mobile-menu-btn {
	display: none;
	cursor: pointer;
	transition:
		background 0.2s,
		color 0.2s;
	border-radius: 100px;
	padding: 10px 14px;
	background: transparent;
	border: 0px;
	color: var(--tdim);
}
.mobile-menu-btn:hover {
	color: white;
}

.navbox {
	pointer-events: all;
	display: inline-flex;
	width: auto;
	border-radius: 100px;
	/* border: 2px solid var(--gd); */
	border: 1px solid color-mix(in srgb, var(--text) 30%, transparent);
	/* background: hsla(109, 8%, 27%, 0.9); */
	background: color-mix(in srgb, var(--bg) 50%, transparent);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	padding: 5px;
	/* padding: 7px 5px; */
	/* box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35); */
	box-shadow:
		0 0px 8px -3px color-mix(in srgb, var(--text) 100%, transparent),
		0 4px 10px 6px color-mix(in srgb, var(--bg) 100%, transparent);
	transition: transform 0.45s ease-in-out;
	/* will-change: transform; */
	/* transform: translateZ(0); */
}
.navbox:hover {
	transform: scale(1.012) translateZ(0);
}
.navbar {
	display: flex;
	align-items: center;
	gap: 4px;
	width: 100%;
	margin-right: 3px;
	margin-left: -4px;
}
.logo-icon {
	width: 40px;
	flex-shrink: 0;
	margin-right: 3px;
	filter: brightness(1.1);
	margin-left: 20px;
}
.logo {
	font-weight: 500;
	font-size: 13px;
	line-height: 1.1;
	color: rgba(255, 255, 255, 0.9);
	margin-right: 4px;
	white-space: nowrap;
	flex-shrink: 0;
}
.nav-center {
	display: flex;
	align-items: center;
	gap: 7px;
	flex: 1;
	justify-content: center;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 20px;
	padding-right: 5px;
}

.ni {
	position: relative;
	overflow: hidden;
	color: white;
	/* background: #596453b5; */
	background: color-mix(in srgb, var(--text) 10%, transparent);
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: 0.07em;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: 100px;
	white-space: nowrap;
	z-index: 0;
	transition: color 0.2s;
	border: 1px solid color-mix(in srgb, var(--text) 30%, transparent);
	/* box-shadow: 0 0 5px -1px color-mix(in srgb, var(--gd) 80%, transparent); */
	box-shadow: 0 0 8px -4px color-mix(in srgb, var(--text) 80%, transparent);
}
.ni::after {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	/* background: var(--gd); */
	background: color-mix(in srgb, var(--text) 29%, transparent);
	pointer-events: none;
	z-index: -1;
	transition: left 0s;
}
.ni:hover {
	color: #fff !important;
}
.ni:hover::after {
	left: 0;
	transition: left 0.38s ease-out;
}
.ni.active {
	/* background: var(--gd); */
	background: color-mix(in srgb, var(--text) 29%, transparent);
	color: #fff;
}
.ni.active::after {
	display: none;
}

.ndrop {
	position: relative;
	padding-bottom: 25px;
	margin-bottom: -25px;
}
/* Only apply hover effects on devices with a mouse */
@media (hover: hover) {
	.ndrop:hover .nav-dd {
		display: block !important;
	}
}

/* Mobile taps rely strictly on this class */
.ndrop.open .nav-dd {
	display: block !important;
}
.nav-dd {
	display: none;
	position: absolute;
	top: 100% !important;
	left: 0%;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 12px;
	min-width: 190px;
	overflow: hidden;
	width: fit-content;
	padding: 0px 0 5px 0;
}
.nav-dd::before {
	content: "";
	position: absolute;
	top: -18px;
	left: 0;
	width: 100%;
	height: 18px;
	background: transparent;
}
.dd-hdr {
	display: block;
	padding: 8px 16px 5px;
	margin: 4px 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: white;
	/* background: var(--nav-drop); */
	background: color-mix(in srgb, var(--bg) 80%, transparent);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	transition: all 0.2s ease;
}
.dd-hdr:hover {
	color: var(--text);
}
#submenu1 {
	margin-top: 0px;
}
#submenu2 {
	margin-bottom: 0px;
}
.dd-lnk {
	display: block;
	padding: 2px 16px 2px 26px;
	font-size: 12px;
	font-weight: 500;
	/* color: var(--nav-drop); */
	color: color-mix(in srgb, var(--bg) 60%, transparent);

	transition:
		background 0.15s,
		color 0.15s;
}
.dd-lnk:hover {
	/* color: var(--gd) !important; */
	color: color-mix(in srgb, var(--bg) 90%, transparent) !important;
}
.single-subnav {
	padding: 2px 15px 2px 7px !important;
	min-width: 50px !important;
	text-align: left;
}
.ncontact {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 15px;
	border-radius: 100px;
	background: rgba(35, 41, 34, 0.75);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.9);
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: 0.06em;
	flex-shrink: 0;
	transition: background 0.2s;
}
.ncontact:hover {
	background: var(--gd);
}

/* ══====================================================================== SIDEBAR ── */

#sb {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: var(--sw2);
	/* background: var(--surface-full); */
	/* border-right: 2px solid var(--border); */
	/* border-right: 2px solid color-mix(in srgb, var(--border) 40% transparent); */

	/* backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px); */

	z-index: 1000;
	display: flex;
	flex-direction: column;
	padding-top: calc(var(--sb) + 8px);
	backface-visibility: hidden;
	/* box-shadow: 0 0 15px color-mix(in srgb, var(--border) 40%, transparent); */
	box-shadow:
		0 0 15px color-mix(in srgb, var(--border) 100%, transparent),
		inset -5px 0 15px -5px color-mix(in srgb, var(--border) 50%, transparent);

	transition: all 0.3s ease-out;
	/* display: none; */
}

/* #sb:hover {
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	} */

.ss-wrapper,
.cbody,
.ec {
	contain: layout style;
}
/* AFTER */
/* #sb {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: var(--sw);
	background: rgba(12, 12, 12, 0.65);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	border-right: 1px solid var(--border);
	z-index: 400;
	display: flex;
	flex-direction: column;
	padding-top: calc(var(--sb) + 8px);
} */

/* Creates a subtle green glow behind the sidebar for the glass to blur */
/* body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: var(--sw);
	height: 100vh;
	background: linear-gradient(to bottom, rgba(100, 118, 97, 0.2), transparent);
	z-index: -1;
	pointer-events: none;
} */
#sb-hdr {
	padding: 10px 14px 7px;
	/* font-size: clamp(13.5px, 0.8vw, 30px); */
	font-size: clamp(13.5px, 0.8vw, 24px);
	font-weight: 800;
	letter-spacing: 0.1em;
	/* color: var(--g); */
	/* color: var(--sb-active); */
	/* color: var(--border); */
	color: color-mix(in srgb, var(--dimtitle) 50%, transparent);
	border-bottom: 1px solid var(--border);
	text-transform: uppercase;
}
#sb-prog {
	height: 1px;
	background: var(--border);
	position: relative;
	flex-shrink: 0;
	box-shadow: 0 0 5px 3px color-mix(in srgb, var(--border) 50%, transparent);
}
#sb-fill {
	height: 2px;
	/* background: var(--g); */
	background: var(--sb-active);
	width: 0%;
	position: absolute;
	left: 0;
	top: -1px;
	transition: width 0.18s linear;
	box-shadow: 0 0 5px 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
#sb-nav {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 10px 0;
}

/* #### main sidebar items */
.sbn {
	display: flex;
	align-items: center;
	gap: 8px;
	/* padding: 8px 14px; */
	padding: 4px 14px;
	/* Replaced background transition with transform for smooth sliding */
	transition: transform 0.2s ease-out;
	text-decoration: none;
}
.sbn:hover {
	/* Slides the entire item slightly to the right, matching .sbn-sub */
	transform: translateX(2px);
}
/* main sidebar item text on reg */
.sblbl {
	/* font-size: clamp(11.5px, 0.6vw, 25px); */
	/* font-size: clamp(10px, 0.6vw, 15px); */
	/* font-size: clamp(10px, 0.5vw, 14px); */
	font-size: clamp(12px, 0.5vw, 14px);
	font-weight: 500;
	letter-spacing: 0.07em;
	color: var(--sb-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 0.2s;
	text-transform: uppercase;
	font-weight: var(--sb-font-weight);
}
/* main sidebar item dot on reg */
.sbdot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	border: 1.5px solid var(--sb-text);
	background: transparent;
	flex-shrink: 0;
	transition: all 0.2s;
}
/* main sidebar item text on hover */
.sbn:hover .sblbl {
	/* Shifts the text color to the sleek green */
	/* color: var(--g); */
	color: var(--sb-hover);
	font-weight: var(--sb-font-weight-hover);
}
/* main sidebar item dot on hover */
.sbn:hover .sbdot {
	/* Optionally lights up the hollow dot to match the text */
	/* border-color: var(--g); */
	border-color: var(--sb-hover);
	background: var(--sb-hover);
}
/* main sidebar item dot on selected */
.sbn.active .sbdot {
	/* background: var(--accent); */
	background: var(--sb-active);
	/* border-color: var(--accent); */
	border-color: var(--sb-active);
}
/* main sidebar item text on selected */
.sbn.active .sblbl {
	/* color: var(--accent); */
	color: var(--sb-active);
	font-weight: var(--sb-font-weight-active);
}

/* ######## Sidebar Sub-Nav */
.sb-group {
	display: flex;
	flex-direction: column;
	margin-top: 0px;
}
.sb-subnav {
	display: flex;
	flex-direction: column;
	padding-left: 29px;
	gap: 4px;
	margin-top: 2px;
	margin-bottom: 8px;
}

/* sub sidebar item text on reg */
.sbn-sub {
	/* font-size: clamp(10.5px, 0.5vw, 25px); */
	/* font-size: clamp(10.5px, 0.5vw, 15px); */
	/* font-size: clamp(10.5px, 0.4vw, 14px); */
	font-size: clamp(10px, 0.4vw, 12px);
	font-weight: 500;
	color: var(--sb-text);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	transition:
		color 0.2s,
		transform 0.2s;
	position: relative;
	display: flex;
	align-items: center;
	gap: 4px;
	line-height: 1.25;
	padding: 0;
	width: calc(100% - 40px);
	min-width: 0;
	margin-left: 20px;
	font-weight: var(--sb-font-weight);
}
/* sub sidebar item dot on reg */
.sbn-sub::before {
	content: "";
	position: absolute;
	left: -11px;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	border: 1.5px solid var(--sb-text);
	background: transparent;
	opacity: 0.8;
	transition:
		opacity 0.2s,
		border-color 0.2s,
		background 0.2s;
}
/* sub sidebar item text on hover */
.sbn-sub:hover {
	color: var(--sb-hover);
	transform: translateX(2px) translateZ(0); /* GPU Accel */
	font-weight: var(--sb-font-weight-hover);
}
/* sub sidebar item dot on hover */
.sbn-sub:hover::before {
	border-color: var(--sb-active-hover);
	background: var(--sb-active-hover);
	opacity: 1;
}
/* sub sidebar item text on selected */
.sbn-sub.active {
	color: var(--sb-active);
	font-weight: var(--sb-font-weight-active);
}
/* sub sidebar item dot on selected */
.sbn-sub.active::before {
	border-color: var(--sb-active);
	background: var(--sb-active);
	opacity: 1;
}

/* #### */

#sb-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.75);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	z-index: 399;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	will-change: opacity;
}
#sb-overlay.show {
	opacity: 1;
	pointer-events: all;
}

/* ═==============================═ MAIN LAYOUT & GLOBAL ── */
#mn {
	/* margin-left: var(--sw); */
	margin-left: 0;
	padding-top: calc(var(--navh) + 50px);
}

section {
	scroll-margin-top: calc(var(--anchorh) + 0vh);
}
.sb {
	padding: 0 48px var(--h2padding);
	/* padding-bottom: var(--h2padding); */
}
.sh {
	display: flex;
	align-items: center;
	gap: 12px;
	/* padding: 36px 0 10px; */
	margin: 0 -48px;
	padding-top: calc(var(--h2padding) + 20px);
	padding-bottom: 20px;
}
.sh h2 {
	font-family: "Rubik", sans-serif;
	font-weight: 900;
	font-size: clamp(28px, 3vw, 70px);
	letter-spacing: 0.01em;
	white-space: nowrap;
	color: var(--port-header);
	padding: 0 4px;
	transition: color 0.21s ease-in-out;
}
.sh-r {
	flex: 1;
	/* height: 15px; */
	/* height: 5px; */
	height: 4px;
	background: color-mix(in srgb, var(--port-hover) 50%, transparent);
	transition: background 0.21s ease-in-out;
}
.sh .sh-r:first-child {
	flex: none;
	width: calc(48px - 12px);
}
.sh .sh-r:last-child {
	flex: 1;
}

.sh-pulse-btn {
	background: none;
	border: none;
	cursor: pointer;
}
.sh-pulse-btn:hover h2 {
	color: var(--port-hover);
}
/* .sh:has(.sh-pulse-btn:hover) .sh-r {
	background: var(--port-hover);
} */

.copy-toast {
	position: fixed;
	bottom: 28px;
	/* left: 50%; */
	left: calc(50% + (var(--sw) / 2));
	transform: translateX(-50%) translateY(20px);
	/* background: color-mix(in srgb, var(--contrast-text) 10%, transparent); */
	backdrop-filter: blur(4px);
	border: 1px solid var(--border);
	border-radius: 100px;
	padding: 8px 18px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--accent);
	opacity: 0;
	transition:
		opacity 0.25s,
		transform 0.25s;
	pointer-events: none;
	z-index: 5000;
	will-change: opacity, transform;
}
.copy-toast.show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ══ HERO & INTRO BAR ── */
#hero {
	padding: 20px 48px 0 48px;
	container-type: inline-size;
	
}
#hero h1 {
	font-weight: 900;
	font-size: clamp(44px, 7vw, 88px);
	/* font-size: min(clamp(44px, 7vw, 88px),90vw); */
	/* font-size: 2em; */
	font-size: min(5.5cqi, 88px);
	font-size: min(7.5cqi, 88px);
	/* font-size: 7.5cqi; */
	white-space: nowrap;	
	
	line-height: 0.92;
	letter-spacing: -0.01em;
	color: white;
	text-align: center;
	text-shadow: 0 0 70px color-mix(in srgb, var(--tdim) 70%, transparent);
	/* 0 0 30px var(--surface), */
	/* 0 0 70px var(--surface), */
	/* 0 0 40px rgba(100, 118, 97, 1); */
}
#ibar {
	background: rgba(82, 70, 30, 0.75);
	padding: 16px 48px;
	margin-top: 14px;
	display: flex;
	align-items: center;
	/* justify-content: space-between; */
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	border-top: 1px solid rgba(200, 168, 75, 0.25);
	border-bottom: 1px solid rgba(200, 168, 75, 0.25);
}
#ibar p {
	/* font-size: clamp(13.5px, 0.8vw, 50px); */
	font-size: clamp(13.5px, 0.8vw, 20px);
	color: var(--dimtitle);
	line-height: 1.65;
}
#ibar p a {
	color: var(--accent2);
	text-decoration: underline;
	text-underline-offset: 3px;
}
#ibar p strong {
	font-weight: 700;
}
.pbtn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 15px;
	border-radius: 100px;
	border: 2px solid var(--blogAlt);
	color: var(--blogAlt);
	/* border: 2px solid var(--accent);
	color: var(--accent); */
	font-weight: 800;
	font-size: 11px;
	letter-spacing: 0.1em;
	white-space: nowrap;
	transition:
		background 0.2s,
		color 0.2s;
	cursor: pointer;
	background: transparent;
	text-transform: uppercase;
}
.pbtn::before {
	content: "●";
	font-size: 14px;
}
.pbtn:hover {
	/* background: var(--accent); */
	background: var(--blogAlt);
	/* color: var(--bg); */
	/* color: var(--border); */
	/* color: var(--dimtitle); */
	color: var(--bg);
}

/* ── READABILITY / LAYOUT HELPERS ── */
.hbox {
	/* background: rgba(200, 168, 75, 0.07); */
	background: color-mix(in srgb, var(--text) 4%, transparent);
	/* border-left: 3px solid var(--accent2); */
	border-left: 3px solid var(--badge);
	border-radius: 0 6px 6px 0;
	padding: 10px 14px;
	margin: 10px 0;
	/* font-size: clamp(13.5px, 0.8vw, 50px); */
	/* font-size: clamp(13.5px, 0.8vw, 30px); */
	font-size: clamp(13.5px, 0.8vw, 20px);
	/* color: #888888; */
	color: var(--cbul);
	/* line-height: 1.5; */
}
.hbox b,
.hbox strong {
	/* color: var(--accent2); */
	color: var(--badge);
	font-weight: 700;
}
.hbox p + p {
	margin-top: 5px;
}

.hbox-g {
	background: rgba(100, 118, 97, 0.08);
	border-left: 3px solid var(--g);
	border-radius: 0 6px 6px 0;
	padding: 10px 14px;
	margin: 10px 0;
	font-size: clamp(13.5px, 0.8vw, 50px);
	color: var(--tdim);
	line-height: 1.15;
}
.hbox-g strong {
	color: var(--gl);
	font-weight: 700;
}
.hbox-g b {
	color: var(--accent);
	font-weight: 700;
}

.dbox {
	/* background: rgba(0, 0, 0, 0.32); */
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 12px 16px;
	margin: 10px 0;
	font-size: 12.5px;
	color: var(--tdim);
	line-height: 1.8;
}
.dbox b,
.dbox strong {
	/* color: var(--text); */
	color: var(--dimtitle);
	text-transform: uppercase;
	font-weight: 600;
}

.nlist {
	list-style: none;
	display: flex;
	flex-direction: column;
	padding-left: 0;
	padding-bottom: 10px;
}
.nlist > li {
	font-size: clamp(13.5px, 0.8vw, 20px);
	color: var(--tdim);
	line-height: 1.15;
	margin-top: 10px;
}
.nlist > li > .nn {
	color: var(--gl);
	font-weight: 700;
	font-size: clamp(13.5px, 0.8vw, 20px);
	min-width: 18px;
	flex-shrink: 0;
	font-family: monospace;
	letter-spacing: 0;
}

@media (min-width: 1051px) {
	/* The Floating Sidebar Box */
	#sb {
		top: 100px;
		left: 24px;
		bottom: auto;
		height: auto;
		max-height: calc(100vh - 130px);
		border-radius: 14px;
		padding-top: 12px;
		background: color-mix(in srgb, var(--bg) 30%, transparent);
		border: 2.5px solid color-mix(in srgb, var(--border) 60%, transparent);
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
		/* Keeps the scrollbar looking clean inside the rounded box */
		overflow: hidden;

		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		/* display: none; */
	}

	/* Softens the progress bar edges to match the box */
	#sb-prog,
	#sb-fill {
		border-radius: 100px;
	}

	/* Perfectly Center Content & Prevent Sidebar Overlap */
	#mn {
		/* Symmetrical padding forces the internal content to be perfectly centered relative 
		   to the whole screen, while ensuring it NEVER overlaps the 250px sidebar */
		padding-left: calc(var(--sw) + 10px);
		padding-right: calc(var(--sw) + 10px);
		/* padding-right: 0; */
		/* display: flex;
		flex-direction: column;
		align-items: center; */
	}

	/* Enforce width bounds on all sections */
	section {
		width: 100%;
		/* max-width: 1200px; */
		max-width: 1600px;
		/* min-width: 400px; */
		margin: 0 auto;
	}

	footer {
		min-width: 100vw !important;
		/* margin: 0 !important; */
		margin-bottom: 20px;
		/* padding: 0; */
	}
}

/* ══════════════════════════════════════════════════════════ */
/* ══ PORTFOLIO COMPONENTS                                 ── */
/* ══════════════════════════════════════════════════════════ */
.amp {
	font-family: "Times New Roman";
	text-shadow:
		0.5px 0 currentColor,
		-0.5px 0 currentColor;
}

/* Timeline */
#tls {
	/* padding: 36px 48px 0; */
	padding: 0px 0px 20px;
}
.tlbox {
	background: var(--surface);
	border: 2.5px solid var(--border);
	border-radius: var(--r);
	/* padding: 20px; */
	padding: 30px 0;
	margin: 0;
	transform-origin: top left;
	transition:
		border-color 0.25s,
		box-shadow 0.25s,
		transform 0.3s ease-in-out;
	/* will-change: transform; */

	background: color-mix(in srgb, var(--surface) 80%, transparent);
	/* border: 3px solid color-mix(in srgb, var(--border) 30%, transparent); */
	border: 3px solid color-mix(in srgb, var(--border) 80%, transparent);
	border-radius: 10px;
	overflow: hidden;
	transition: all 0.3s ease-in-out;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(4px);
}
.tlbox:hover {
	transform: translateY(-3px);
	background: color-mix(in srgb, var(--dimtitle) 7%, transparent);
	border-color: color-mix(in srgb, var(--accent2) 60%, transparent);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.tlbox h3 {
	font-weight: 900;
	font-size: clamp(25px, 1.9vw, 200px);
	color: var(--dimtitle);
	margin-bottom: -3px;
}
.tlsub {
	font-size: clamp(13.5px, 0.9vw, 50px);
	color: var(--tmut);
	margin-bottom: 14px;
}
.tlframe {
	border-radius: 12.5px;
	overflow-x: auto;
	overflow-y: hidden;
	height: 195px;
	-webkit-overflow-scrolling: touch;
}
.tlframe::-webkit-scrollbar {
	height: 3px;
}
.tlframe::-webkit-scrollbar-thumb {
	/* background: var(--accent); */
	background: var(--dimtitle);
	border-radius: 100px;
}
.tlframe iframe {
	width: 100%;
	/* min-width: 900px; */
	min-width: 600px;
	height: 195px;
	border: none;
	pointer-events: auto;
}
.scrollcue-btn {
	display: flex;
	justify-content: center;
	padding: 20px 0 0;
	background: none;
	border: none;
	width: 100%;
	cursor: pointer;
}
.scrollcue-btn svg {
	width: 34px;
	height: 34px;
	stroke: var(--g);
	fill: none;
	stroke-width: 2.5;
	animation: bounce 2.2s ease-in-out infinite;
	transition: stroke 0.2s;
	will-change: transform;
}
.scrollcue-btn:hover svg {
	stroke: var(--accent);
}
@keyframes bounce {
	0%,
	100% {
		transform: translateY(0) translateZ(0);
	}
	50% {
		transform: translateY(6px) translateZ(0);
	}
}

#timeline-iframe {
	opacity: 0;
	transition: opacity 0.8s ease-out;
}
#timeline-iframe.loaded {
	opacity: 1;
}

/* Tabs */
.tg {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}
.tglbl {
	font-size: 11px;
	font-style: italic;
	color: var(--dimtitle);
	margin-right: 4px;
	white-space: nowrap;
	line-height: 1.35;
	font-weight: 700;
}
.tab-btns {
	display: flex;
	gap: 5px;
}
.tb {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 15px;
	border: 1.5px solid var(--dimtitle);
	background: transparent;
	color: var(--dimtitle);
	font-family: "Rubik", sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.07em;
	border-radius: 3px;
	cursor: pointer;
	transition:
		background 0.15s,
		color 0.15s,
		transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	/* will-change: transform; */
}
.tab-btns .tb:first-child {
	border-radius: 100px 20px 20px 100px;
}
.tab-btns .tb:last-child {
	border-radius: 20px 100px 100px 20px;
}
.tab-btns .tb:only-child {
	border-radius: 100px;
}
.tb:hover:not(:disabled) {
	/* background: rgba(255, 255, 255, 0.05); */
	background: color-mix(in srgb, var(--accent2) 12%, transparent);
	transform: translateY(-1px) translateZ(0);
}
.tb:disabled {
	/* background: var(--dimtitle); */
	background: var(--accent2);
	border: 1.5px solid var(--accent2);
	color: var(--bg);
	cursor: default;
}

/* Slideshow */
.ss-wrapper {
	position: relative;
	overflow: hidden;
	padding: 20px;
	padding-top: 10px;
	padding-right: 30px;
	padding-bottom: 0 !important;
	margin: -10px -20px 0 -20px;
	transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	box-sizing: content-box;
}
.ss-clip {
	overflow: visible;
	transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
}
.sscont {
	overflow: visible;
}
.ssfr {
	display: flex;
	gap: 100px;
	/* will-change: transform; */
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.ssslide {
	flex: none;
	min-width: 0;
}
.sarr {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--surface2);
	border: 1px solid var(--border);
	color: var(--tdim);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	font-size: 18px;
	padding: 0;
	line-height: 1;
	opacity: 0;
	cursor: pointer;
	transition:
		opacity 0.2s,
		background 0.15s,
		top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	display: none !important;
}
.ss-wrapper:hover .sarr {
	opacity: 1;
}
.sarr:hover {
	background: var(--surface);
	color: var(--text);
}
.sarr.spr {
	left: 8px;
}
.sarr.snx {
	right: 8px;
}

/* Experience Cards */
.ec {
	background: var(--surface);
	border: 2.5px solid var(--border);
	border-radius: var(--r);
	overflow: hidden;
	opacity: 0;
	transform: translateY(16px);
	/* transform: translateY(20px); */
	/* transition:
		border-color 0.25s,
		box-shadow 0.25s,
		opacity 0.5s,
		transform 0.5s; */
	/* transition: opacity 0.3s ease-out, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); */
	/* transition: opacity 0.3s ease-out, transform 0.4s ease-out; */
	/* this controls the NEIGHBORING slide's transform */
	transition: all 0.15s ease-out;
	/* will-change: transform, opacity; */
}
.ec.visible {
	opacity: 1;
	transform-origin: top left;
	transform: translateY(0) scale(1) translateZ(0);
	transition: all 0.3s ease-in-out;

	/* border-color: color-mix(in srgb, var(--accent2) 70%, transparent); */
	/* box-shadow:
	0 0 7px 4px color-mix(in srgb, var(--accent) 10%, transparent), 0 0 9px 4px color-mix(in srgb, var(--accent) 6%, transparent); */
	/* --miniheader: color-mix(in srgb, var(--accent2) 50%, transparent); */
}
.ec.visible:hover {
	/* border-color: rgba(100, 118, 97, 0.6); */
	/* border-color: color-mix(in srgb, var(--accent) 40%, transparent); */
	/* border-color: color-mix(in srgb, var(--accent) 60%, transparent); */
	/* 0 0 9px 4px rgba(100, 118, 97, 0.06); */
	/* box-shadow: 0 0 7px 4px color-mix(in srgb, var(--accent) 5%, transparent), 0 0 9px 4px color-mix(in srgb, var(--accent) 5%, transparent); */
	/* 0 0 7px 4px rgba(100, 118, 97, 0.1), */
	transform-origin: top left;
	transform: translateY(0) scale(1.01) translateZ(0);
	/* --ec-card-lines-color: var(--accent2); */

	/* hover interaction */
	border-color: color-mix(in srgb, var(--accent2) 100%, transparent);
	box-shadow:
		0 0 7px 4px color-mix(in srgb, var(--accent) 10%, transparent),
		0 0 9px 4px color-mix(in srgb, var(--accent) 6%, transparent);
	/* --miniheader: var(--accent2); */
	/* --miniheader: var(--not-white); */
	/* --miniheader: var(--not-black); */
	/* transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; */
	transition: all 0.3s ease-out;
	/* floating up transition time */
}
.ec.visible:hover .ect {
	color: var(--accent2);
	/* color: var(--not-white); */
}

.ec.visible:hover .cbul {
	transform: translateX(5px);
}
/* .ec.visible:hover .badge {
	background: var(--badge);
	color: var(--bg);
} */

.ech {
	padding: 15px 20px 11px;
	border-bottom: var(--ec-card-lines) solid var(--ec-card-lines-color);
	transition: all 0.3 ease-in-out;
}
.ect {
	font-weight: 900;
	/* font-size: clamp(25px, 1.9vw, 200px); */
	font-size: clamp(20px, 1.7vw, 200px);
	letter-spacing: 0.01em;
	color: var(--dimtitle);
	line-height: 1;
	padding-bottom: 0px;
	transition: all 0.3s ease-in-out;
	/* color: color-mix(in srgb, var(--accent2) 50%, transparent); */
}
.ecm {
	display: flex;
	align-items: baseline;
	gap: 5px;
	flex-wrap: wrap;
	margin-top: 4px;
	margin: 10px 0;
	line-height: 0.8;
	font-size: clamp(13px, 0.7vw, 50px);
	font-style: normal;
	font-weight: 700;
	/* color: var(--g); */
	/* color: var(--bullbold); */
	color: var(--tdim);
	text-transform: uppercase;
}
.ecm span:not(:last-child)::after {
	content: " // ";
	margin: 0 5px;
	opacity: .7;
	font-weight: normal;
	color: var(--dimtitle);
}
.ecdate {
	/* color: var(--badge); */
	color: var(--accent2);
}
.echr {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 15px;
}
.eclogos {
	display: flex;
	align-items: center;
	background: white;
	padding: 6px 10px;
	border-radius: 6px;
	gap: 10px;
	flex-shrink: 0;
	margin-right: -8px;
}
.eclogos img {
	height: clamp(35px, 3.5vw, 55px);
	/* height: clamp(30px, 3vw, 55px); */
	width: auto;
	object-fit: contain;
	filter: brightness(0.88);
}
.darkimgs {
	background: white;
	padding: 3px;
	border-radius: 6px;
	/* margin-bottom:5px; */
}

/* Badges */
.brow {
	padding: 9px 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.badge {
	margin-top: 2px;
	display: inline-flex;
	align-items: center;
	padding: 2px 9px;
	/* border-radius: 2px; */
	border-radius: 5px;
	/* background: transparent; */
	border: 1px solid var(--badge);
	/* color: var(--badge); */
	color: var(--g);
	/* font-size: clamp(11px, 0.6vw, 40px); */
	font-size: clamp(10px, 0.6vw, 13px);
	font-weight: 500;
	letter-spacing: 0.1em;
	white-space: nowrap;
	/* background: var(--badge); */
	background: color-mix(in srgb, var(--badge) 20%, transparent);
	/* background: color-mix(in srgb, var(--badge) 10%, transparent); */
	/* background: pink; */
	/* color: var(--bg); */
	/* color: var(--tdim); */
	/* transition: all 0.3s ease-in-out; */
	text-transform: uppercase;
}

/* Card Body */
.cbody {
	display: grid;
	grid-template-columns: 1fr 240px;
	gap: 16px;
	padding: 8px 20px 16px;
	align-items: start;
}
.cbody.full {
	grid-template-columns: 1fr;
}
.cbody.wimg {
	grid-template-columns: 1fr 270px;
}
.cbody.flex-img {
	grid-template-columns: 3fr 1fr;
}
.cbody > * {
	min-width: 0;
}
.cbody > div > *:first-child {
	margin-top: 0 !important;
}
.cintro {
	font-size: clamp(13.5px, 0.8vw, 20px);
	color: var(--tdim);
	/* line-height: 1.7; */
}
.cbul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 5px;
	transition: transform 0.3s ease-in-out;
}
.cbul > li {
	position: relative;
	padding-left: 16px;
	/* font-size: clamp(13.5px, 0.8vw, 50px); */
	/* font-size: clamp(13.5px, 0.8vw, 30px); */
	font-size: clamp(13.5px, 0.8vw, 20px);
	line-height: 1.15;
	/* color: var(--tdim); */
	color: var(--cbul);
	padding-bottom: 3px;
}
.cbul > li::before {
	content: "•";
	position: absolute;
	left: 2px;
	/* color: var(--tdim); */
	color: var(--cbul);
}
.cbul > li > ul {
	margin-top: 4px;
	padding-left: 18px;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.cbul > li > ul > li {
	position: relative;
	/* font-size: clamp(13.5px, 0.8vw, 50px); */
	/* font-size: clamp(13.5px, 0.8vw, 25px); */
	/* font-size: clamp(13.5px, 0.8vw, 20px); */
	font-size: inherit;
	/* color: var(--tdim); */
	color: var(--cbul);
	line-height: 1.15;
	padding-bottom: 3px;
}
.cbul > li > ul > li::before {
	content: "•";
	position: absolute;
	left: -14px;
	/* color: var(--tdim); */
	color: var(--cbul);
	/* font-size: clamp(13.5px, 0.8vw, 50px); */
	font-size: clamp(13.5px, 0.8vw, 25px);
}
.cbul b,
.cbul strong {
	color: var(--bullbold);
	font-weight: 700;
}
.cbul i {
	font-style: italic;
}
.cbul a {
	color: var(--accent2);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.2s;
}
.cbul a:hover {
	color: var(--accent);
}
.csub {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--border);
}
.cslbl {
	/* font-size: clamp(13.5px, 0.9vw, 50px); */
	/* font-size: clamp(13.5px, 0.9vw, 30px); */
	font-size: clamp(13.5px, 0.9vw, 20px);
	/* font-size: clamp(13px, 0.8vw, 16px); */
	font-weight: 800;
	/* font-weight: 700; */
	letter-spacing: 0.1em;
	color: var(--miniheader);
	text-transform: uppercase;
	margin-bottom: 5px;
	padding-top: 15px;
	/* padding-top: 0; */
	transition: 0.3s ease-in-out;
}
.cslbl:first-child {
	padding-top: 0;
}
/* Stat Rows */
.srow {
	display: flex;
	border: 2px solid var(--border);
	border-radius: 10px;
	overflow: hidden;
	margin: 10px 0;
	padding: 3px;
}
.scell {
	flex: 1;
	min-width: 80px;
	padding: 12px 14px;
	/* border: .5px solid color-mix(in srgb, var(--border) 50%, transparent); */
	/* background: color-mix(in srgb, var(--border) 30%, transparent); */
	background: color-mix(in srgb, var(--border) 20%, transparent);
	border-radius: 8px;
	margin: 3px;
}
.slbl {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--tdim);
	text-transform: uppercase;
	margin-bottom: 3px;
}
.sval {
	font-weight: 900;
	font-size: 22px;
	/* color: var(--gl); */
	/* color: var(--badge); */
	color: var(--bullbold);
	line-height: 1;
}
.ssub {
	font-size: 11px;
	color: var(--tdim);
	margin-top: 4px;
	line-height: 1.35;
}

/* Link Buttons */
.clinks {
	padding: 10px 20px 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	border-top: var(--ec-card-lines) solid var(--ec-card-lines-color);
	/* background-color: rgba(255, 255, 255, 0.05); */
	background-color: var(--surface2);
	transition: all 0.3 ease-in-out;
}
.clnk {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 28px;
	padding: 0px 14px;
	border-radius: 100px;
	/* border: 1px solid var(--border); */
	border: 1px solid color-mix(in srgb, var(--dimtitle) 50%, transparent);
	/* color: var(--border); */
	color: color-mix(in srgb, var(--dimtitle) 50%, transparent);
	text-transform: uppercase;
	/* font-size: clamp(11px, 0.6vw, 20px); */
	font-size: clamp(11px, 0.6vw, 15px);
	padding: clamp(10px, 0.6vw, 15px);
	padding: clamp(5px, 0.3vw, 15px) 10px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-decoration: none;
	transition:
		border-color 0.15s,
		background 0.15s,
		transform 0.15s,
		color 0.15s;
}
.clnk::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--border);
	flex-shrink: 0;
	transition:
		transform 0.15s,
		background 0.15s;
}
.clnk:hover {
	border-color: rgba(200, 168, 75, 0.55);
	background: rgba(200, 168, 75, 0.09);
	color: var(--accent);
	transform: translateY(-1px) translateZ(0);
}
.clnk:hover::before {
	transform: scale(1.4);
	background: var(--accent);
}

/* Carousels & Media Elements */
/* .cw, .cw-inner {
  overscroll-behavior-x: none;
  touch-action: pan-y;
} */

.cw {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	background: var(--surface2);
	max-height: 50vh;
	cursor: pointer;
	transition:
		/* transform 0.922s ease,
		box-shadow 0.22s ease; */ all 0.3s ease-out;
	margin-top: 0px;
	margin-bottom: 2px;
	/* will-change: transform; */
}
.cw:hover {
	transform: scale(1.007) translateZ(0);
	box-shadow: 0px -1px 7px color-mix(in srgb, var(--dimtitle) 50%, transparent);
}
.cw-inner {
	background: #1a1a1a;
	min-height: 200px;
	position: relative;
	width: 100%;
	height: auto !important;
	aspect-ratio: 4 / 3;
}
.cw-inner.tall-h {
	height: 300px;
}
.cw-inner.port-h {
	height: min(45vh, 340px);
}
/* .cimg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: none;
}
.cimg.on { display: block; } */
.cimg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	visibility: hidden;
	z-index: 1;
	transition:
		opacity 0.4s ease-in-out,
		visibility 0.4s; /* Bonus: Adds a smooth crossfade! */
}
.cimg.on {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}
.cimg.contain {
	object-fit: contain;
	background: transparent;
}

.cdots {
	display: flex;
	justify-content: center;
	gap: 5px;
	padding: 6px 0 2px;
}
.cdot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--tmut);
	transition: all 0.18s;
	cursor: pointer;
}
.cdot:hover {
	background: var(--accent);
	transform: scale(1.2);
}
.cdot.on {
	background: var(--accent);
	transform: scale(1.5);
}
.car-caption {
	font-size: 10.5px;
	color: var(--tdim);
	padding: 3px 2px 0;
	min-height: 16px;
	line-height: 1.4;
	font-style: italic;
	margin-bottom: 15px;
	text-align: center;
}
.car-caption a {
	color: var(--accent2);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Lightbox */
#lb {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s;
}
#lb.open {
	opacity: 1;
	pointer-events: all;
}

.lbb {
	position: absolute;
	inset: 0;
	background: rgba(35, 41, 34, 0.88);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	cursor: pointer;
	transition: backdrop-all 4s ease;
}

/* Make this cover the screen so we can use flex to push things to the edges */
.lbbox {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 70px 20px 80px 20px;
	z-index: 1;
	pointer-events: none; /* Lets clicks pass through to .lbb to close */
}

/* THE FIX: Only enable clicks on these elements when the lightbox is actually open! */
#lb.open .lbi,
#lb.open .lbclose,
#lb.open .lb-nav,
#lb.open .lbcap {
	pointer-events: auto;
}

.lbi {
	width: auto;
	/* height: auto; */
	height: 100vw;
	/* min-height: 70vw; */
	max-height: 100%;
	max-width: calc(100vw - 100px);
	border-radius: 8px;
	/* box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); */
	filter: drop-shadow(0 4px 24px color-mix(in srgb, var(--bg) 70%, transparent));
	/* object-fit: contain; */
}

/* Bottom Control Bar */
.lb-bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	/* height: 80px; */
	height: auto;

	display: flex;
	align-items: center;
	justify-content: center; /* Centered to hug caption */
	gap: 15px; /* 15px buffer between arrows and text */
	padding: 0 20px;
	/* margin-bottom: min(10px,1vh); */
	margin-bottom: 20px;
	pointer-events: none;
	z-index: 10000;
	padding-top: 20px;
	/* padding-top: 5px; */
}
.ec-cap {
	position: absolute;
	/* bottom: 0; */
	top: 20px;
	/* top: 0px; */
	right: 40px;
	left: 0px;
	width: 100%;
	/* height: 80px; */
	height: auto;

	display: flex;
	align-items: center;
	justify-content: center; 
	/* gap: 15px; */
	padding: 0 20px;
	margin-bottom: 20px;
	z-index: 10000;
	/* padding-top: 20px; */
	


	  position: fixed;
      top: -40px;
      /* top: -50px; */
      background: transparent;

}

.cap-bubble {
	display: flex;
	align-items: center;
	justify-content: center;
	/* height: 35px; */
	height: 40px;

	margin: 0;
	border-radius: 100px;
	background: color-mix(in srgb, var(--bg) 100%, transparent);
	/* border: 2px solid color-mix(in srgb, var(--bg) 100%, transparent); */
	/* backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px); */
	/* height: auto; */
	/* padding: 30px 0 !important; */
}

.lbcap {
	position: relative;
	left: auto;
	transform: none;
	width: 100%;
	/* min-width: min(90vw, 200px); */
	min-width: min(90vw, 300px);
	max-width: 300px;
	/* max-width: 300px; */
	font-size: 12px;
	color: rgba(255, 255, 255, 0.6);
	text-align: center;
	line-height: 1.4;
	pointer-events: auto;
}

.lbcap a {
	color: var(--accent2);
}

/* Fixed Close Button - Top Right */
.lbclose {
	position: absolute;
	top: 20px;
	right: 40px;
	/* background: rgba(255, 255, 255, 0.1); */
	border: 0px solid rgba(255, 255, 255, 0.2);
	background: transparent;
	/* color: #fff; */
	color: var(--dimtitle);
	font-size: 26px;
	line-height: 1;
	width: 38px;
	height: 38px;
	/* border-radius: 50%; */
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
}

.lbclose:hover,
.lb-nav:hover {
	/* background: rgba(255, 255, 255, 0.22); */
	transform: scale(1.05);
	color: var(--accent2);
}

/* Navigation Arrows */
.lb-nav {
	position: relative;
	border: 0px solid rgba(255, 255, 255, 0.2);
	background: transparent;
	border-radius: 50%;
	width: 70px;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--dimtitle);
	font-size: 20px;
	transition:
		background 0.15s,
		transform 0.15s;
	cursor: pointer;
	z-index: 2;
	/* padding-bottom: 2px; */
}
.fas,
.fa-chevron-left,
.fa-chevron-right {
	font-size: 12px;
}

/* ══════════════════════════════════════════════════════════ */
/* ══ HOME PAGE COMPONENTS                                 ── */
/* ══════════════════════════════════════════════════════════ */

/* About Section */
#about {
	padding: 0 48px;
	margin-top: 30px;
	/* background: pink; */
}
.about-box {
	text-align: center;
	margin-top: 14px;
	/* display: flex;
	justify-content: center;
	align-items: center; */
	place-items: center;
	margin-bottom: 100px;
}
/* .about-text {
	width: clamp(50%, 1000px, 100%);
} */
.about-photo-wrap {
	float: right;
	width: 168px;
	height: 168px;
	border-radius: 50%;
	border: 2px solid rgba(100, 118, 97, 0.4);
	margin: 0 0 15px 25px;
	shape-outside: circle(50%);
	overflow: hidden;
	/* transform: translateZ(0);  */
}

.about-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	transform: scale(1.15) translateZ(0);
}
.about-photo-wrap:hover .about-photo {
	transform: scale(1.3) translateZ(0);
}

.about-name {
	font-weight: 900;
	font-size: clamp(30px, 4.5vw, 70px);
	color: white; /* Set the base text back to white */
	letter-spacing: 0.01em;
	line-height: 1;
	gap: 6px;
	padding-bottom: 10px;
	text-transform: uppercase;
}

/* Add this new class for the specific text */
.text-gradient {
	background: linear-gradient(15deg, #5f8159, #c09c31);
	background-clip: text;
	-webkit-background-clip: text;
	color: color-mix(in srgb, white 40%, transparent);
}

.name-chevron {
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 12px solid var(--g);
	margin-bottom: 10px;
	flex-shrink: 0;
	transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.name-chevron-btn {
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0;
	display: inline-flex;
	align-items: flex-end;
	cursor: pointer;
	line-height: 0;
}
.name-chevron-btn:hover .name-chevron {
	border-top-color: var(--accent);
	transform: translateY(-2px);
}
.name-chevron-btn:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
	border-radius: 4px;
}
.about-role {
	font-size: clamp(15px, 1vw, 40px);
	color: var(--tdim);
	margin: 0px 0 16px;
	font-weight: 700;
	font-style: italic;
	transition: all 0.25s;
}
.about-bio {
	/* font-size: clamp(13.5px, 1.1vw, 50px); */
	/* font-size: clamp(13.5px, 1.1vw, 50px) !important; */
	/* font-size: clamp(13px, 1vw, 50px) !important; */
	/* color: var(--dimtitle); */
	color: var(--contrast-text);
	/* color: var(--accent); */
	line-height: 1.2;
	margin-bottom: 10px;
	width: clamp(50%, 1000px, 100%);
	/* text-align: left; */
	text-align: center;
}
.about-bio span {
	/* color: var(--accent2); */
	/* color: white; */
	/* background: var(--accent2); */
	/* background: color-mix(in srgb, var(--accent2) 40%, transparent); */
	background: color-mix(in srgb, var(--g) 40%, transparent);
	border-radius: 100px;
	padding: 0px 10px;
	font-weight: 500;
}
.about-bio a {
	color: var(--accent2);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.15s;
}
.about-bio-list li a {
	color: var(--accent2);
	transition: color 0.15s;
}
.about-bio a:hover,
.about-bio-list li a:hover {
	color: var(--accent);
}

/* Custom About Section Bullets */
.about-bio-list {
	list-style: none;
	padding-left: 0;
	margin: 8px 0 18px 0; /* Spacing top and bottom */

	/* Displays the 6 items in a clean 2-column grid on desktop, 1-column on mobile */
	/* display: grid; */
	/* grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); */
	/* gap: 8px; */
}

.about-bio-list li {
	position: relative;
	padding-left: 16px;
	font-size: clamp(13.5px, 0.8vw, 50px);
	/* color: var(--text); */
	color: var(--tdim);
	/* font-weight: 300; */
}

/* Custom Yellow Bullet Point */
.about-bio-list li::before {
	content: "•";
	position: absolute;
	left: 2px;
	/* color: var(--accent); */
	color: var(--tdim);
	font-size: 16px;
	line-height: 1;
	top: -1px;
}

/* Featured Work Feed */
#featured {
	padding: 40px 48px 52px;
}
.fw-head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 26px;
}
.fw-title {
	font-weight: 900;
	font-size: clamp(26px, 3.5vw, 44px);
	/* color: var(--text); */
	color: var(--dimtitle);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
/* .fw-see-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 15px;
	border: 1.5px solid var(--border);
	border-radius: 100px;
	font-size: 12px;
	font-weight: 700;
	color: var(--dimtitle);
	letter-spacing: 0.08em;
	background: var(--surface);
	transition:
		border-color 0.2s,
		color 0.2s,
		background 0.2s;
}
.fw-see-btn:hover {
	border-color: var(--g);
	color: var(--g);
	background: var(--gpale);
} */

.fw-see-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 10px;
	/* border: 1.5px solid var(--border); */
	border: 2px solid var(--border);
	border-radius: 10px;
	font-size: 12px;
	font-weight: 700;
	color: var(--dimtitle);
	letter-spacing: 0.08em;
	background: var(--surface);
	transition:
		border-color 0.2s,
		color 0.2s,
		background 0.2s,
		transform 0.2s ease-in-out;
}
.fw-see-btn:hover {
	/* border-color: var(--accent);
	color: var(--accent); */
	border-color: var(--g);
	color: var(--g);
	/* background: color-mix(in srgb, var(--accent) 10%, transparent); */
	background: color-mix(in srgb, var(--g) 10%, transparent);
	transform: translateY(-2px);
}

.fw-grid {
	display: flex;
	grid-template-columns: auto 330px;
	gap: 24px;
	align-items: start;
	justify-content: start;
	margin-top: -20px;
}
.work-list {
	flex: 0 1 clamp(50%, 1000px, 100%);
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-bottom: 25px;
}
.insta-section {
	flex: 0 0 330px;
	width: 330px;
}

/* Work Item Box (.wi) */
/* Work Item Box (.wi) */
.wi {
	display: flex;
	/* background: color-mix(in srgb, var(--surface) 50%, transparent); */
	/* border: 2px solid var(--border); */
	/* border-radius: 14px; */
	overflow: hidden;
	opacity: 0;
	transform: translateY(16px);
	text-decoration: none;
	color: inherit;
	transition:
		border-color 0.3s ease,
		background 0.3s ease,
		box-shadow 0.3s ease,
		transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.5s;
	will-change: transform, opacity;
}
.wi.vis {
	opacity: 1;
	transform: translateY(0);
}
.wi.vis:hover {
	/* background: color-mix(in srgb, var(--dimtitle) 10%, transparent); */
	/* border-color: var(--accent2); */
	/* box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); */
	transform: translateY(-2px);
}
/* .wi-img-wrap {
	width: 180px;
	min-height: 100px; 
	overflow: hidden;
	flex-shrink: 0;
	border-right: 1px solid var(--border);
	position: relative; 
	aspect-ratio: 2 / 1;
} */
.wi-img-wrap {
	width: 180px;
	/* height: 100px; */
	min-height: 100px;
	overflow: hidden;
	flex-shrink: 0;
	border-right: inherit;
	position: relative;
	aspect-ratio: 16 / 9; /* Keep the ratio consistent */
}
.wi-thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	position: absolute;
	top: 0;
	left: 0;
}
.wi.vis:hover .wi-thumb {
	transform: scale(1.1) translateZ(0);
}
.wi.vis:hover .wi-bul {
	transform: translateX(8px);
}
.wi-body {
	padding: 16px 20px;
	flex: 1;
	min-width: 0;
}
.wi-title {
	font-weight: 900;
	font-size: clamp(18px, 1vw, 30px);
	color: var(--dimtitle);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin-bottom: 6px;
	transition: color 0.2s;
}
.wi.vis:hover .wi-title {
	color: var(--text);
}
.wi-bul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
	transition: all 0.3s ease-out;
}
.wi-bul > li {
	position: relative;
	padding-left: 13px;
	font-size: clamp(13px, 0.75vw, 30px);
	color: var(--tdim);
	line-height: 1.3;
}
.wi-bul > li::before {
	content: "•";
	position: absolute;
	left: 2px;
	color: var(--tmut);
}
.wi-bul b,
.wi-bul strong {
	color: var(--bullbold);
	font-weight: 700;
}
.wi-text {
	font-size: clamp(13px, 0.75vw, 30px);
	color: var(--tdim);
	line-height: 1.65;
}

/* Instagram Component */
.insta-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 5px;
}
.insta-head-title {
	font-weight: 900;
	font-size: clamp(22px, 1.7vw, 50px);
	color: var(--dimtitle);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.insta-ig-link {
	width: clamp(22px, 1.7vw, 50px);
	height: clamp(22px, 1.7vw, 50px);
	border-radius: 7px;
	border: 1.5px solid var(--border);
	background: var(--surface);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tdim);
	font-size: clamp(10px, 0.7vw, 40px);
	transition:
		color 0.2s,
		border-color 0.2s,
		background 0.2s;
}
.insta-ig-link:hover {
	color: var(--g);
	border-color: var(--g);
	background: var(--gpale);
}
/* .insta-card {
	background: var(--surface);
	border: 1.5px solid var(--border);
	border-radius: var(--r);
	overflow: hidden;
	transition:
		border-color 0.25s,
		box-shadow 0.25s,
		transform 0.25s;
}
.insta-card:hover {
	border-color: rgba(100, 118, 97, 0.6);
	box-shadow:
		0 0 7px 4px rgba(100, 118, 97, 0.1),
		0 0 9px 4px rgba(100, 118, 97, 0.06);
	transform: scale(1.008) translateZ(0);
} */

.insta-card {
	background: color-mix(in srgb, var(--surface) 80%, transparent);
	border: 3px solid color-mix(in srgb, var(--border) 30%, transparent);
	border-radius: 10px;
	overflow: hidden;
	transition: all 0.3s ease-in-out;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.insta-card:hover {
	transform: translateY(-3px);
	background: color-mix(in srgb, var(--dimtitle) 7%, transparent);
	border-color: color-mix(in srgb, var(--accent2) 60%, transparent);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.insta-profile {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--border);
}
.insta-avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	/* border: 2px solid var(--g); */
	border: 1px solid var(--border);
	flex-shrink: 0;
}
.insta-username {
	font-weight: 700;
	/* font-size: clamp(14px, 0.75vw, 30px); */
	font-size: clamp(16px, 0.75vw, 20px);
	/* color: var(--text); */
	color: var(--dimtitle);
	line-height: 1.2;
}
.insta-location {
	/* font-size: clamp(12px, 0.6vw, 20px); */
	font-size: clamp(14px, 0.6vw, 18px);
	color: var(--tdim);
	display: flex;
	align-items: center;
	gap: 3px;
	margin-top: 1px;
}
.insta-photo-wrap {
	position: relative;
	width: 100%;
	background: #000;
	overflow: hidden;
}
.insta-photo-inner {
	position: relative;
	width: 100%;
	padding-bottom: 80%;
}
.insta-photo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.4s;
	pointer-events: none;
}
.insta-photo.ion {
	opacity: 1;
}
.insta-arr {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	z-index: 2;
	opacity: 0;
	transition: opacity 0.2s;
	cursor: pointer;
}
.insta-photo-wrap:hover .insta-arr {
	opacity: 1;
}
.insta-arr.arr-l {
	left: 8px;
}
.insta-arr.arr-r {
	right: 8px;
}
.insta-actions {
	padding: 9px 14px 4px;
	display: flex;
	align-items: center;
	gap: 14px;
}
.insta-act {
	color: var(--tdim);
	font-size: 17px;
	transition: color 0.15s;
	line-height: 1;
}
.insta-bm {
	margin-left: auto;
}
.insta-dots {
	display: flex;
	justify-content: center;
	gap: 5px;
	/* padding: 5px 0 2px; */
	padding: 0px 14px 12px;
	margin-top: -15px;
}
.insta-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--tmut);
	transition: all 0.18s;
	cursor: pointer;
}
.insta-dot.ion {
	background: var(--accent);
	transform: scale(1.5);
}
.insta-footer {
	padding: 4px 14px 12px;
}
.insta-likes {
	font-weight: 700;
	font-size: 12px;
	color: var(--text);
	margin-bottom: 3px;
}
.insta-caption {
	/* font-size: clamp(12px, 0.6vw, 20px); */
	font-size: clamp(14px, 0.6vw, 18px);
	/* color: var(--tdim); */
	color: var(--dimtitle);
	line-height: 1.5;
}
.insta-caption a {
	/* color: var(--text); */
	color: var(--dimtitle);
	font-weight: 700;
}

.wi-img-wrap,
.cw-inner,
.insta-photo-inner {
	contain: strict;
	aspect-ratio: 16 / 9;
}

/* Contact Form Component */
#contact {
	padding: 0 48px 52px;
}
.contact-card {
	display: grid;
	grid-template-columns: 210px 1fr;
	border: 1.5px solid var(--border);
	border-radius: var(--r);
	overflow: hidden;
	transition:
		border-color 0.25s,
		box-shadow 0.25s,
		transform 0.25s;
	/* will-change: transform; */
}
.contact-card:hover {
	border-color: rgba(100, 118, 97, 0.6);
	box-shadow:
		0 0 7px 4px rgba(100, 118, 97, 0.1),
		0 0 9px 4px rgba(100, 118, 97, 0.06);
	transform: scale(1.005) translateZ(0);
}
.contact-left {
	background: var(--surface);
	padding: 32px 22px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	border-right: 1px solid var(--border);
}
.contact-title {
	font-weight: 900;
	font-size: 28px;
	color: #fff;
	line-height: 1;
	margin-bottom: 10px;
}
.contact-sub {
	font-size: 12px;
	color: var(--tdim);
}
.contact-right {
	padding: 24px 28px;
	background: transparent;
}
.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 12px;
}
.form-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.form-label {
	font-size: clamp(9.5px, 0.6vw, 20px);
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--tmut);
	text-transform: uppercase;
}
.form-label span {
	color: var(--accent);
}
.form-input {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 8px 12px;
	font-family: "Rubik", sans-serif;
	font-size: 13px;
	color: var(--text);
	outline: none;
	transition: border-color 0.15s;
	width: 100%;
}
.form-input:focus {
	border-color: var(--g);
}
textarea.form-input {
	min-height: 110px;
	resize: vertical;
}
.form-send {
	display: block;
	width: 100%;
	padding: 10px;
	background: var(--bullbold);
	border: none;
	border-radius: 6px;
	font-family: "Rubik", sans-serif;
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: 0.12em;
	color: #fff;
	margin-top: 12px;
	cursor: pointer;
	transition: background 0.2s;
	text-transform: uppercase;
}
.form-send:hover {
	background: var(--g);
}

/* ══════════════════════════════════════════════════════════ */
/* ══ FOOTER & UTILS                                       ── */
/* ══════════════════════════════════════════════════════════ */
.div {
	border: none;
	border-top: 2px solid color-mix(in srgb, var(--border) 50%, transparent);
}
footer {
	background: var(--surface-full);
	padding: 18px 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	/* border-top: 2px solid var(--border); */

	/* box-shadow: 15px 0px 15px color-mix(in srgb, var(--border) 100%, transparent), */
	box-shadow: 10px 0px 20px color-mix(in srgb, var(--border) 100%, transparent);
	/* inset -5px 5px 15px -5px color-mix(in srgb, var(--border) 100%, transparent); */
}
.fnav {
	display: flex;
	gap: 20px;
}
.fnav a {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #5a5a58;
	transition: color 0.15s;
}
.fnav a:hover,
.fnav a.fp,
.fnav a.active {
	color: var(--accent);
}
.fnav a.fp,
.fnav a.active {
	border-bottom: 2px solid var(--accent);
}
.ficons {
	display: flex;
	gap: 8px;
}
.fi {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--border);
	font-size: 12px;
	font-weight: 700;
	transition: all 0.15s;
	text-decoration: none;
}
.fi:hover {
	border-color: var(--accent);
	color: var(--accent);
}

/* ══════════════════════════════════════════════════════════ */
/* ══ PAGE PRELOADER ANIMATION                             ── */
/* ══════════════════════════════════════════════════════════ */
#site-preloader {
	position: fixed;
	inset: 0;
	background: var(--bg);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	transition:
		opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
		visibility 0.8s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: opacity, visibility;
}
#site-preloader.hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.preloader-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}
#site-preloader.hidden .preloader-content {
	transform: translateY(-40px);
}
.preloader-svg {
	width: 250px;
	height: 250px;
	overflow: visible;
	transform: translateZ(0);
}
.blob {
	fill-opacity: 0;
	width: 500px;
	transform-origin: center;
	will-change: transform;
	animation: blobFadeIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.b-green {
	fill: var(--g);
	animation-delay: 0.3s;
}
.b-gold {
	fill: var(--accent);
	animation-delay: 0.6s;
}
.b-accent2 {
	fill: var(--accent2);
	animation-delay: 0.45s;
}
.logo-path {
	fill: var(--text);
	fill-opacity: 0;
	stroke: var(--text);
	/* stroke-width: 4px; */
	stroke-width: 8px;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transform: translateZ(0);
	will-change: transform;
	animation:
		/* drawLogo 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards,
		fillLogo 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards 1.7s; */
		drawLogo 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards,
		fillLogo 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards 1.7s;
}

@keyframes drawLogo {
	to {
		stroke-dashoffset: 0;
	}
}
@keyframes fillLogo {
	to {
		fill-opacity: 1;
	}
}
@keyframes fadeUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes blobFadeIn {
	0% {
		fill-opacity: 0;
		transform: scale(0.7);
	}
	100% {
		fill-opacity: 0.135;
		transform: scale(1);
	}
}

.preloader-text {
	font-weight: 900;
	font-size: clamp(22px, 2vw, 50px);
	letter-spacing: 0.15em;
	color: var(--title);
	opacity: 0;
	transform: translateY(10px);
	/* animation: fadeUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	animation-delay: 1.2s; */
	animation: fadeUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	animation-delay: 0.6s;
}
.preloader-subtext {
	font-size: clamp(15px, 1vw, 50px);
	font-weight: 500;
	letter-spacing: 0.15em;
	color: var(--g);
	opacity: 0;
	transform: translateY(10px);
	/* animation: fadeUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	animation-delay: 1.4s; */
	animation: fadeUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	animation-delay: 0.7s;
}

/* Enhancements for Article Quotes */
#post-body blockquote a:hover strong,
#post-body blockquote a:hover b {
	color: inherit;
}
#post-body blockquote:has(+ .quote-spacer) {
	margin-bottom: -5px;
}
#post-body .quote-spacer + blockquote {
	margin-top: 0px;
}

/* ══════════════════════════════════════════════════════════ */
/* ══ UNIFIED RESPONSIVE MEDIA QUERIES                     ── */
/* ══════════════════════════════════════════════════════════ */

/* index.html wi go left-right to top-bottom */
@media (max-width: 1150px) {
	.form-row {
		grid-template-columns: 1fr;
	}
	.wi {
		flex-direction: column;
		width: 100%;
	}
	.wi-img-wrap {
		width: 100%;
		/* height: 35vw; */
		height: 15vw;
		border-right: none;
		border-bottom: 1px solid var(--border);
	}
	.wi-thumb {
		position: relative;
		height: auto;
		object-fit: contain;
	}
	.wi-bul {
		gap: 0px !important;
	}
}

/* sidebar collapses and ec border color changes */
/* the "mobile" view for all intensive purposes */
@media (max-width: 1050px) {
	:root {
		--navh: 25px;
		--sb: 70px;
		--h2padding: 10px;
	}
	.navbox {
		padding: 7px 5px;
	}
	#sb {
		/* z-index: 400; */
		backdrop-filter: blur(15px);
		-webkit-backdrop-filter: blur(15px);
	}
	.ec.visible {
		border-color: color-mix(in srgb, var(--accent2) 100%, transparent);
	}
	.copy-toast {
		left: 50%;
	}
	.logo,
	.logo-icon,
	.ncontact {
		display: none !important;
	}
	.mobile-box {
		display: inline-flex !important;
	}
	.mobile-menu-btn {
		display: block !important;
		border-radius: 100px;
		/* border: 2px solid var(--gd); */
		/* background: color-mix(in srgb, var(--text) 29%, transparent); */
		/* background: color-mix(in srgb, var(--bg) 50%, transparent); */
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
		/* box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35); */
		border: 1px solid color-mix(in srgb, var(--text) 30%, transparent);
		box-shadow: 0 0 8px -4px color-mix(in srgb, var(--text) 80%, transparent);
		padding: 12px 14px;
		color: var(--text);

		position: relative;
		z-index: 1;
		background: color-mix(in srgb, var(--text) 10%, transparent);
	}
	.mobile-menu-btn::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		border-radius: inherit;

		background: color-mix(in srgb, var(--bg) 50%, transparent);
	}
	.nav-center {
		padding: 0 0px;
		justify-content: flex-start;
	}

	header {
		left: 0;
	}
	.navbox {
		width: max-content !important;
		margin: 0 auto;
	}
	#mn {
		margin-left: 0;
	}

	/* .sb, #tls, #hero, #about, #featured, #contact {
		padding-left: 22px;
		padding-right: 22px;
	}
	#ibar { padding: 14px 22px; }
	.sh { margin: 0 -22px; }
	.sh-pulse-btn { margin-left: 22px; }
	footer { padding: 18px 22px; } */

	.sb,
	/* #tls, */
	#hero,
	#about,
	#featured,
	#contact {
		/* padding-left: 22px;
		padding-right: 22px; */
		padding-left: var(--margin);
		padding-right: var(--margin);
	}
	#ibar {
		padding: 14px 22px;
	}
	.sh {
		margin: 0 -22px;
	}
	.sh .sh-r:first-child {
		width: calc(22px - 12px);
	} /* Recalculates line for 22px padding */
	footer {
		padding: 18px 22px;
	}
	/* Note: .sh-pulse-btn margin-left was deleted to prevent double-indentation */


	.fw-grid {
		grid-template-columns: 1fr;
	}
	.contact-card {
		grid-template-columns: 1fr;
	}
	.contact-left {
		border-right: none;
		border-bottom: 1px solid var(--border);
	}

	.cw {
		aspect-ratio: 5/3;
	}
	.ecm {
		flex-direction: row;
		align-items: wrap;
		margin-top: 15px !important;
	}
	/* .ecm span:not(:last-child)::after { opacity: 0; } */

	.about-card:hover .about-badge {
		transform: translateX(-10vw) translateZ(0);
	}
	/* .ec-show-more-btn {
	color: var(--bg);
	border: 2px solid var(--accent2);
	background: var(--accent2);
	}
	.ec-show-more-btn:hover {
	background: var(--surface2);
	border: 2px solid var(--accent2);
	color: var(--accent2);
	} */

	/* User's Mobile Button Inversion */
	.ec-show-more-btn {
		color: var(--bg);
		border: 2px solid var(--accent2);
		background: var(--accent2);
	}
	.ec-show-more-btn:hover {
		background: var(--surface2);
		border: 2px solid var(--accent2);
		color: var(--accent2);
	}

	/* Functional logic for mobile-only collapse */
	/* .ec.mobile-collapsible.is-collapsed {
        max-height: var(--collapse-h, 450px);
        overflow: hidden;
        position: relative;
    }
    .ec.mobile-collapsible.is-collapsed .ec-collapse-overlay {
        display: flex; 
    } */

	/* Functional logic for mobile-only collapse */
	.ec.mobile-collapsible.is-collapsed {
		max-height: 450px !important;
		overflow: hidden;
		position: relative;
	}
	.ec.collapsible.is-collapsed {
		max-height: 450px !important;
	}
	.ec.mobile-collapsible.is-collapsed .ec-collapse-overlay {
		display: flex;
	}
}

@media (max-width: 1900px) {
	
	#sb {
		z-index: 999;
		display: flex !important;
		/* transform: translateX(-100%); */
		transform: translateX(calc(-100% - 30px));
		/* padding-top: 90px; */
		transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
		/* box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5); */
	}
	#sb.sb-open {
		transform: translateX(0);
	}
}
/* ec cards split from 2 columns to 2 rows (text and images) */
@media (max-width: 820px) {
	.cbody,
	.cbody.wimg,
	.cbody.flex-img {
		grid-template-columns: 1fr;
	}
}

/* index.html 2 columns to 2 rows (for wi & insta) */
@media (max-width: 750px) {
	.about-name {
		margin-top: 10px;
	}
	.fw-grid {
		flex-direction: column;
	}
	.work-list {
		flex: none;
		width: 100%;
	}
	.insta-section {
		flex: none;
		width: 100%;
	}
	.insta-photo-wrap {
		aspect-ratio: 4/3;
	}
	.about-photo-wrap {
		width: 20vw;
		height: 20vw;
	}
}

/* ══════════════════════════════════════════════════════════ */
/* ══ COLLAPSIBLE EC CARDS                                 ── */
/* ══════════════════════════════════════════════════════════ */

/* BASE OVERLAY STYLES (Hidden by default on desktop) */
.ec-collapse-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 160px;
	background: linear-gradient(to bottom, transparent, var(--bg) 80%, var(--bg));
	display: none;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 25px;
	z-index: 10;
	pointer-events: none;
}

/* 1. EXPLICIT DESKTOP & MOBILE COLLAPSE (.collapsible) */
.ec.collapsible.is-collapsed {
	max-height: var(--collapse-h, 450px);
	overflow: hidden;
	position: relative;
}
.ec.collapsible.is-collapsed .ec-collapse-overlay {
	display: flex;
}

/* 2. EXPANDED STATE (Applies to all) */
.ec.is-expanded {
	max-height: none !important;
	/* overflow: visible; */
	overflow: hidden;
}
.ec.is-expanded .ec-collapse-overlay {
	display: flex;
	position: relative;
	height: auto;
	/* background: var(--surface2); */
	padding-top: 15px;
	padding-bottom: 15px;
}

/* 3. BASE BUTTON AESTHETICS */
.ec-show-more-btn {
	pointer-events: auto;
	background: var(--surface2);
	border: 2px solid var(--accent2);
	color: var(--accent2);
	padding: 9px 24px;
	border-radius: 100px;
	font-family: "Rubik", sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	display: inline-flex;
	align-items: center;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.ec-show-more-btn:hover {
	color: var(--bg);
	border-color: var(--accent2);
	background: var(--accent2);
	transform: translateY(-4px);
}

/* Enables smooth horizontal swiping on main cards */
/* .ss-clip {
    touch-action: pan-y;
} */

/* Enables smooth horizontal swiping and prevents native "Go Back" browser gestures */
.ss-clip {
	touch-action: pan-y;
	overscroll-behavior-x: none;
}

.filter-btn {
	display: inline-flex;
	align-items: center;
	height: 32px;
	height: max-content;
	padding: 8px 16px;
	/* border: 1.5px solid var(--dimtitle); */
	/* border: 2px solid var(--dimtitle);
	color: var(--dimtitle); */
	border: 2px solid var(--tdim-fr);
	color: var(--tdim-fr);
	background: transparent;
	/* background: color-mix(in srgb, var(--g) 10%, transparent); */
	font-family: "Rubik", sans-serif;
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: 0.1em;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s ease-out;
	text-transform: uppercase;
	text-align: left;
}

.filter-btn:hover {
	/* border-color: var(--accent2);
	color: var(--accent2); */
	border-color: var(--g);
	color: var(--g);
	transform: translateY(-1px);
	/* background: color-mix(in srgb, var(--g) 10%, transparent); */
	background: color-mix(in srgb, var(--g) 5%, transparent);
}

.filter-btn.active {
	/* border-color: var(--accent2); */
	border-color: var(--g);
	color: var(--bg);
	/* background: var(--accent2); */
	background: var(--g);
}
/* #blog-filters {
	display: flex;
	justify-content: left;
	gap: 10px;
	margin-top: -25px;
	flex-wrap: wrap;
} */
/* .blog-info {
    min-width: 0 !important;
} */
@media (max-width: 1050px) {
	#blog-filters {
		margin-top: -25px;
	}
	.insta-photo-wrap {
		height: 300px;
	}
	.insta-photo-inner {
		padding-bottom: 0; /* Disables the 80% aspect ratio */
		height: 100%; /* Forces inner container to exactly 200px */
	}
}

/* ══════════════════════════════════════════════════════════ */
/* ══ BADGE CLIPPING LOGIC                                 ── */
/* ══════════════════════════════════════════════════════════ */

/* 1. TUNABLE: Full-Width (List Mode) Clip Limit. 
   n+5 means show 4 badges, hide the 5th and beyond. */
.card-stack:not(.tile-mode) .ec-card:not(.open) .brow .badge:nth-child(n + 5) {
	display: none !important;
}

/* 2. TUNABLE: Tile Mode Clip Limit. 
   n+4 means show 3 badges, hide the 4th and beyond. */
.card-stack.tile-mode .ec-card:not(.open) .brow .badge:nth-child(n + 4) {
	display: none !important;
}

/* 3. SHOW ALL: Always display all badges when expanded or in Lightbox */
.ec-card.open .brow .badge,
#card-lb-content .ec-card .brow .badge {
	display: inline-flex !important;
}
/* ══════════════════════════════════════════════════════════ */
/* ══ SKILLS SECTION UI                                    ── */
/* ══════════════════════════════════════════════════════════ */

.skills-wrap {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--uni-gap);
	padding: 10px 0 20px;
}

.skill-cat {
	/* 1. Base styles copied directly from .ec-card */
	/* background: color-mix(in srgb, var(--bg) 1	0%, transparent) !important; */
	background: transparent !important;
	border: 3px solid color-mix(in srgb, var(--border) 30%, transparent);
	border-radius: 10px;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	overflow: hidden;

	/* 2. Customizations for the skills layout */
	padding: 24px;
	transition: all 0.3s ease-in-out;
}

.skill-cat:hover {
	/* 1. Hover styles copied directly from .ec-card */
	transform: translateY(-3px);
	background: color-mix(in srgb, var(--g) 10%, transparent) !important;
	border-color: color-mix(in srgb, var(--g) 50%, transparent);

	/* 2. Customizations (e.g., adding a slight shadow) */
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.skill-cat-title {
	/* font-size: 13.5px; */
	/* font-size: clamp(18px, 1.5vw, 26px); */
	/* font-size: clamp(18px, 1.2vw, 22px); */
	/* font-weight: 800; */
	/* letter-spacing: 0.12em; */
	/* color: var(--dimtitle); */
	/* color: var(--tdim-fr); */
	color: color-mix(in srgb, var(--dimtitle) 85%, transparent);
	text-transform: uppercase;
	margin-bottom: 18px !important;
	border-bottom: 2px solid color-mix(in srgb, var(--border) 50%, transparent);
	padding-bottom: 10px;
}

.skill-badge-row {
	display: flex;
	flex-wrap: wrap;
	/* gap: 10px; */
	gap: 8px;
}

.skill-badge {
	display: inline-flex;
	align-items: center;
	/* padding: 7px 16px; */
	padding: 2px 9px;
	/* border-radius: 100px !important; */
	border-radius: 5px;
	background: color-mix(in srgb, var(--border) 15%, transparent);
	border: 1px solid var(--border);
	color: var(--tdim-fr);
	/* background: color-mix(in srgb, var(--badge) 15%, transparent);
	border: 1px solid var(--badge);
	color: var(--g); */

	/* font-size: 11.5px; */
	font-size: clamp(10px, 0.6vw, 13px);
	/* font-weight: 600; */
	/* font-weight: 500; */
	font-weight: 500;
	/* letter-spacing: 0.05em; */
	letter-spacing: 0.1em;
	transition:
		all 0.5s cubic-bezier(0.22, 0.9, 0.25, 1),
		opacity 0.3s ease;
	cursor: default;

	/* margin-top: 2px; */
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	text-transform: uppercase;
}

/* .skill-badge:hover {
	background: var(--badge);
	color: var(--bg);
	transform: translateY(-2px);
	box-shadow: 0 6px 15px color-mix(in srgb, var(--badge) 35%, transparent);
} */

/* ── UNIFIED BASE CARD ── */
.uni-card {
	/* background: color-mix(in srgb, var(--bg) 50%, transparent); */
	background: color-mix(in srgb, var(--bg) 10%, transparent);
	/* background: color-mix(in srgb, var(--bg) 30%, transparent); */
	/* background: color-mix(in srgb, black 30%, transparent); */
	/* background: pink; */
	/* border: 3px solid color-mix(in srgb, var(--border) 30%, transparent); */
	/* border: 3px solid color-mix(in srgb, var(--border) 50%, transparent); */
	/* border: 3px solid color-mix(in srgb, var(--dark) 50%, transparent); */
	/* border: 3px solid color-mix(in srgb, white 30%, transparent); */
	border: 2.5px solid color-mix(in srgb, white 30%, transparent);
	border-radius: 10px;
	overflow: hidden;
	transition: all 0.3s ease-in-out;
	/* was 6px blur before */
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	/* box-shadow: 0 0 15px 2px color-mix(in srgb, var(--bg) 50%, transparent); */
	box-shadow: 0 0 20px 0px color-mix(in srgb, var(--bg) 50%, transparent);
}

/* .uni-card:hover {
	transform: translateY(-3px);
	background: var(--card-hover-bg, color-mix(in srgb, var(--gd) 50%, transparent));
	border-color: var(--card-hover-border, color-mix(in srgb, var(--g) 50%, transparent));
	box-shadow:
		0 0 15px 0px color-mix(in srgb, var(--g) 40%, transparent),
		inset -50px -30px 100px -5px color-mix(in srgb, var(--g) 20%, transparent);
} */
/* .uni-card:hover {
	transform: translateY(-3px);
	background: var(--card-hover-bg, color-mix(in srgb, var(--gd) 50%, transparent));
	border-color: var(--card-hover-border, color-mix(in srgb, var(--g) 50%, transparent));
	box-shadow:
		0 0 15px 0px color-mix(in srgb, var(--g) 40%, transparent),
		inset -50px -50px 100px -5px color-mix(in srgb, var(--g) 20%, transparent);
} */
/* .uni-card:hover {
	transform: translateY(-3px);
	background: var(--card-hover-bg, color-mix(in srgb, var(--gd) 50%, transparent));
	border-color: var(--card-hover-border, color-mix(in srgb, var(--g) 50%, transparent));
	box-shadow:
		0 10px 30px rgba(0, 0, 0, 0.3),
		inset -15px -15px 30px -10px color-mix(in srgb, var(--g) 40%, transparent),
		inset -80px -80px 120px -20px color-mix(in srgb, var(--g) 15%, transparent);
} */
.uni-card:hover {
	transform: translateY(-3px);
	border-color: var(--card-hover-border, color-mix(in srgb, var(--g) 50%, transparent));
	/* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); */
	box-shadow:
		0 0 15px 0px color-mix(in srgb, var(--g) 40%, transparent),
		inset -50px -30px 100px -5px color-mix(in srgb, var(--g) 20%, transparent);
	/* Stacks a corner-originating glow over your default hover background */
	background:
		radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--g) 30%, transparent) 0%, transparent 70%),
		var(--card-hover-bg, color-mix(in srgb, var(--gd) 50%, transparent));
}

.uni-btn {
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.uni-btn:hover {
	/* box-shadow: 0 0 15px 0px color-mix(in srgb, var(--text) 20%, transparent); */
	box-shadow: 0 0 10px 0px color-mix(in srgb, var(--text) 15%, transparent);
}

/* Base styles for the copyright text */
.fcopy {
	/* color: var(--dimtitle); */
	color: #5a5a58;
	text-align: center;
	flex: 1 1 auto;
}

/* Responsive formatting for narrowed screens */
@media (max-width: 750px) {
	footer {
		flex-direction: column;
		justify-content: center;
		/* gap: 18px; */
		gap: 8px;
		padding: 24px 22px;
	}

	.ficons {
		order: 3;
		display: none;
	}

	.fnav {
		order: 2;
		flex-wrap: wrap;
		justify-content: center;
		gap: 15px;
		display: none;
	}

	.fcopy {
		order: 4;
		font-size: 12px;
		width: 100%;
		margin-top: 5px;
		color: var(--tdim-fr);
	}
}

/* ── TILE MODE (Adaptive Grid Layout) ── */
.card-stack.tile-mode {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 400px));
	/* grid-template-columns: 1fr 1fr; */
	justify-content: start;
	align-items: stretch;
	gap: var(--uni-gap);
}
.card-stack.tile-mode .ec-summary {
	display: flex !important;
	flex-direction: column;
	flex: 1;
	gap: 0;
}
.card-stack.tile-mode .ec-item {
	display: block;
	height: 100%;
}
.card-stack.tile-mode .ec-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.card-stack.tile-mode .ec-thumb {
	height: 190px;
	min-height: 190px;
	flex-shrink: 0;
	opacity: 1;
}
.card-stack.tile-mode .ec-info {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 14px 16px 16px;
	justify-content: flex-start; /*new*/
}
.card-stack.tile-mode .ec-info-header .eclogos img {
	height: 24px;
}
.card-stack.tile-mode .ec-title {
	font-size: clamp(15px, 1.2vw, 25px);
	margin-bottom: 4px;
}
.card-stack.tile-mode .ec-subtitle {
	font-size: 10.5px;
}
.card-stack.tile-mode .ec-brief {
	font-size: clamp(11px, 0.7vw, 14px);
	width: 100%;
}
.card-stack.tile-mode .badge {
	font-size: clamp(8px, 0.5vw, 13px);
	padding: 4px 6px;
	line-height: 1 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.card-stack.tile-mode .expand-prompt,
.card-stack.tile-mode .ec-details {
	display: none;
}

@media (max-width: 800px) {
	.card-stack.tile-mode {
		grid-template-columns: 1fr 1fr;
	}
	.card-stack.tile-mode .ec-thumb,
	.ec-thumb {
		height: 100px;
		min-height: 100px;
	}
	.card-stack.tile-mode .ec-title {
		font-size: 13px;
	}
	.card-stack.tile-mode .ec-subtitle {
		font-size: 9px;
		letter-spacing: 0;
	}
	.card-stack.tile-mode .ec-info {
		padding: 12px;
	}
	.card-stack.tile-mode .ec-info-header .eclogos img {
		height: 20px;
	}
	.card-stack.tile-mode .ec-info-header .eclogos {
		display: none;
	}
}

@media (max-width: 450px) {
	.ni {
		font-size: 2.5vw !important;
	}
	.mobile-menu-btn {
		display: none !important;
	}
	.card-stack.tile-mode {
		grid-template-columns: 1fr !important;
	}
	.navbox {
		max-width: calc(100vw - 20px) !important;
		overflow-x: auto; /* Allows the pill to scroll horizontally if links are long */
		-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
	}
	.navbox::-webkit-scrollbar {
		display: none;
	}
	.sh h2 {
		white-space: normal !important;
		overflow-wrap: break-word;
	}
}

html,
body {
	max-width: 100vw;
	overflow-x: hidden;
}

@media (max-width: 1050px) {
	body::after {
		/* background-size: 25px 25px; */
		background-image:
			linear-gradient(to right, rgba(255, 255, 255, 0.05) 3px, transparent 3px),
			linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 3px, transparent 3px);
	}
	.lbi {
		/* max-width: 95vw; */
		max-width: calc(100vw - 40px);
		height: auto;
	}
	.lb-bottom {
		padding: 0 15px;
		/* width: 95vw; */
		/* center */
	}
	.lbclose {
		right: 15px;
	}
}

/* Lightbox Wrapper */
#lb {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;

	/* THE FIX: Use visibility instead of opacity for the wrapper to bypass the browser bug */
	visibility: hidden;
	transition: visibility 0s linear 0.25s; /* Delays hiding until child animations finish closing */
}
#lb.open {
	pointer-events: all;
	visibility: visible;
	transition: visibility 0s linear 0s; /* Appears instantly so children can begin animating */
}

/* The Blur Backdrop */
.lbb {
	position: absolute;
	inset: 0;
	cursor: pointer;

	/* Start State */
	/* background: rgba(35, 41, 34, 0); */
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);

	/* FIX: GPU Pre-warming to stop first-load flashes */
	transform: translateZ(0);
	will-change: background, backdrop-filter;

	/* Smooth out-transition (when closing has no delay) */
	transition:
		background 0.25s ease-out,
		backdrop-filter 0.25s ease-out,
		-webkit-backdrop-filter 0.25s ease-out;
}

#lb.open .lbb {
	/* End State */
	/* background: rgba(35, 41, 34, 0.88); */
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);

	/* FIX: A tiny 20ms delay when OPENING lets the browser construct the GPU layer before fading */
	transition:
		background 0.25s ease-out 0.02s,
		backdrop-filter 0.25s ease-out 0.02s,
		-webkit-backdrop-filter 0.25s ease-out 0.02s;
}

/* The Content Wrapper (Images and Buttons) */
.lbbox {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 70px 20px 80px 20px;
	z-index: 1;
	pointer-events: none;

	/* Independently fade the contents */
	opacity: 0;
	transform: translateZ(0);
	will-change: opacity;
	transition: opacity 0.25s ease-out;
}

#lb.open .lbbox {
	opacity: 1;
	/* Match the 20ms micro-delay so the image fades in sync with the background */
	transition: opacity 0.25s ease-out 0.02s;
}

/* ══ GPU PRE-WARM (fixes first-open flash) ──
   will-change alone doesn't guarantee the compositor actually builds the
   backdrop-filter/opacity layers ahead of time - browsers often defer that
   work until the element is first shown, which is exactly why the very
   first open jumps straight to the end state instead of fading.
   This class forces the browser to render the lightbox once, at opacity:0
   (fully invisible to the user), so those layers are built and cached
   before the visitor ever clicks a photo. */
#lb.lb-prewarm {
	visibility: visible;
	opacity: 0;
}
#lb.lb-prewarm .lbb {
	background: rgba(35, 41, 34, 0.88);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: none !important;
}
#lb.lb-prewarm .lbbox {
	opacity: 1;
	transition: none !important;
}

@media (max-width: 500px) {
	#floating-dl-btn {
		font-size: 0 !important;
		/* padding: 0 !important; */
		/* width: 46px; */
		/* height: 46px; */
		/* border-radius: 50%; */
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0 !important;
	}

	#floating-dl-btn i {
		font-size: 16px !important;
		margin: 0 !important;
	}
}

/* MARQUEE CONTAINER */
.marquee {
	position: relative;
	display: flex;
	overflow: hidden;
	user-select: none;
	/* width: 100%; */
	width: var(--pageMaxWidth);
	/* max-width: var(--pageMaxWidth); */
	gap: 80px; /* Spacing between Track 1 and Track 2 */

	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	padding: 10px 0;
	border: 3px solid var(--border);

	/* background: linear-gradient(to right, transparent 0%, var(--g) 5%, var(--g) 95%, transparent 100%); */
	-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
	mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);

}

/* THE TRACKS */
.marquee-track {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	min-width: 100%; /* Ensures tracks are wide enough to cover the screen */
	gap: 80px; /* Spacing between images within the track */

	animation: scroll-marquee 20s linear infinite;
}

/* Pause the scrolling if the user hovers over it */
/* .marquee:hover .marquee-track {
    animation-play-state: paused;
} */

/* THE IMAGES */
.marquee-track img {
	height: 40px;
	width: auto;
	flex-shrink: 0; /* Forces images to keep aspect ratio and not squish */
	margin: 0;
	padding: 0;

	filter: invert(1) grayscale(100%) brightness(1.5);
	opacity: 0.9;
}

/* FLAWLESS LOOP MATH */
@keyframes scroll-marquee {
	from {
		transform: translateX(0);
	}
	to {
		/* Moves the track exactly its width, PLUS the gap width. 
           This makes Track 2 snap instantly to where Track 1 started. */
		transform: translateX(calc(-100% - 80px));
	}
}

/* MOBILE RESPONSIVENESS */
@media (max-width: 1050px) {
/* @media (max-width: 1650px) { */
	.marquee {
	gap: 40px;
	/* width: 90vw; */
	width: calc(100vw - 22px);

	-webkit-mask-image: linear-gradient(to right, transparent 0%, black 40px, black calc(90%), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, black 40px, black calc(90%), transparent 100%);
	/* -webkit-mask-image: linear-gradient(to right, transparent 0%, black 40px, black calc(100% - 40px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, black 40px, black calc(100% - 40px), transparent 100%); */
}
	/* #marquee {
		padding: 40px 22px;
	} */
	.marquee-track {
		gap: 40px; /* Shrink inner gap */
	}
	@keyframes scroll-marquee {
		from {
			transform: translateX(0);
		}
		to {
			/* Update the math to match the new 40px gap */
			transform: translateX(calc(-100% - 40px));
		}
	}
}