html, body { margin: 0; }
 
		html, body, * { cursor: none !important; }

		* {
	box-sizing: border-box;
}

				html {
	min-height: 100%;
	background: linear-gradient(
		112deg,
		rgba(245, 245, 245, 1) 0%,
		rgba(245, 242, 235, 1) 51%,
		rgba(239, 228, 245, 1) 100%
	);
	background-repeat: no-repeat;
	background-attachment: fixed;     /* ensures gradient covers viewport */
	background-size: cover;           /* stretch to fill visible area */
				}

		:root {
			font-size: 120%;
			scroll-behavior: smooth;
			--padding: 1.25rem;
			--radius: 0.7rem;
			--stroke: 0.15rem;
}

		.gridbody {
			width: 100%;
			/* height: 100%; */
			position: relative;
		}

		h3 { font-weight: 500; }

		.spacer { width: 100%; height: 100%; /* background: pink; */ }

		.column { width: 100%; height: 100%; /* background: green; */ }

		.row1 {
			transition: 300ms ease-in-out;
			/* background-color: blue; */
			position: relative;
			height: calc(4 * var(--padding));
		}

		 .name {
			position: absolute;
			font-family: aldrich;
			font-size: 4vw;
			-webkit-text-stroke-width: var(--stroke);
			-webkit-text-stroke-color: #242424;
			color: #D9D9D9;
			letter-spacing: -0.26vw;
			inset-block-end: calc(1 * var(--padding));
			inset-inline-start: var(--padding);
		}

		sup {
			font-size: 2.8vw;
			letter-spacing: -0.1vw;
		}


		span {
			letter-spacing: -0.5vw;
		}


		.cd {
			color: #242424;
			font-family: "franklin-gothic-atf", sans-serif;
			font-weight: 300;
			font-style: italic;
			font-size: 2.45vw;
			text-align: right;
			position: absolute;
			line-height: 2.1vw;
			inset-inline-end: var(--padding);
			inset-block-end: calc(1 * var(--padding));
		}

		.filter-bar, footer {
			display: grid;
			grid-template-columns: 11fr 1fr 11fr 1fr 11fr 1fr 11fr 1fr 11fr;
			transition: 300ms ease-in-out;
			padding-inline: var(--padding);
		}

		.filter-bar {
			height: 100%;
			position: sticky;
			inset-block-start: var(--padding);
			z-index: 100;
		}

		.projects {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
			gap: var(--padding);
			margin-inline-start: var(--padding);
			margin-inline-end: calc(var(--padding) - 0.15rem);
			transition: 300ms ease-in-out;
			padding-block: var(--padding);
			padding-block-end: calc(2 * var(--padding));
		}

		.about {
			padding-block-end: var(--padding);
			padding-block-start: 0;
		}

		.about2 {
			padding-block-end: calc(2 * var(--padding));
			padding-block-start: 0;
		}

		button {
			background-color: #D9D9D9;
			width: 100%;
			height: calc(var(--padding) * 2);
			border-radius: 0.7rem;
			border: var(--stroke) solid #242424;
			color: #242424;
			font-family: aldrich;
			font-size: 0.8rem;
			display: flex;
			justify-content: center;
			align-items: center;
			padding-block-start: calc(1.5 * var(--stroke));
			text-align: center;
			-webkit-text-stroke-width: 0.04rem;
			transition: 300ms ease-in-out;
			outline: none;
		}


		footer button {
			padding-block-start: calc(1.5 * var(--stroke));
		}

		.project {
			background-color: #D9D9D9;
			object-fit: contain;
			padding: var(--padding);
			position: relative;
			transition: 300ms ease-in-out;
		}

		.tags {
			position: absolute;
			inset-block-end: var(--padding);
			display: grid;
			gap: var(--padding);
			width: calc(100% - (2 * var(--padding)));
			transition: 300ms ease-in-out;
			outline: none;
		}

		.tag {  
			height: var(--padding);
			font-size: 0.8rem;
			border-radius: calc(var(--radius)/2); 
			outline: none;
			border: var(--stroke) solid #242424;
					}

		.project h3 {
			color: #4D4356;
			-webkit-text-stroke-width: calc(var(--stroke) / 2);
			-webkit-text-stroke-color: #242424;
		}

		.project p { color: #242424; }

		p {
			font-family: "franklin-gothic-atf", sans-serif;
			font-weight: 300;
			font-style: normal;
			font-size: 0.9rem;
			line-height: 1.1rem;
		}

		.projectlink {
			background-color: #4D4356;
			width: 99.5%;
			height: 30rem;
			border-radius: var(--radius);
			border: var(--stroke) solid #242424;
			color: #242424;
			font-family: aldrich;
			font-size: 1.3rem;
			display: grid;
			grid-template-columns: 2fr 1.41fr;
			overflow: hidden;
			clip-path: inset(0 round var(--radius));
			transition: 300ms ease-in-out;
			outline: none;
		}

		.projectlink h3 {
			margin-block-end: -0.2rem;
		}

		.projectcontainer, .projectcontainer3 {
			position: relative;
		}

		.imagecontainer { overflow: hidden; position: relative; transition: 300ms ease-in-out; }

		.imagecontainer img {
			display: block;
			width: 100%; height: 100%;
			object-fit: cover;
			transform: scale(1);
			transition: transform 300ms ease-in-out;
			will-change: transform;
		}

		.line {
			height: 100%;
			width: var(--stroke);
			background-color: #242424;
			position: absolute;
			inset-inline-start: 0;
			inset-block-start: 0;
			z-index: 10;
		}

		.line2 {
			height: 100%;
			width: var(--stroke);
			background-color: #242424;
			position: absolute;
			inset-inline-end: 0;
			inset-block-end: 0;
			z-index: 10;
		}


.filter-bar button.active,
		.project .tag.active {
			background-color: #4D4356;
			color: #D9D9D9;
			box-shadow: inset var(--stroke) 0px 12px #11031d;
			outline: none;
			border: var(--stroke) solid #242424;
		}

		.projectlink:hover {
			border: calc(2 * var(--stroke)) solid #4D4356;
		}

.filter-bar button.active h3 { color: #D9D9D9; transition: 300ms ease-in-out;}

 .filter-bar button h3 { 
			color: inherit; 
			transition: 300ms ease-in-out; }

		.projectcontainer:hover .imagecontainer img { 
			transform: scale(1.1); 
			transition: 300ms ease-in-out;
		}

		.projectcontainer2:hover .imagecontainer img { 
			transform: scale(1.1); 
			transition: 300ms ease-in-out;
		}


		button:hover {
			outline-offset: -0.35rem;
			transition: 300ms ease-in-out;
			-webkit-text-stroke-width: 0.04rem;
			-webkit-text-stroke-color: #242424;
			outline: calc(var(--radius) / 2) solid #4D4356;
		}



		 .tag:hover { 
			outline: calc(var(--radius) / 4) solid #4D4356;
			outline-offset: -0.25rem;
			transition: 300ms ease-in-out;
		}

		.filter-bar button:hover h3 { 
			color: #4D4356; 
			transition: 300ms ease-in-out;
		}
		
		footer button:hover{
			 outline: calc(var(--radius) / 4) solid #4D4356;
			outline-offset: -0.25rem;
		}

		footer button:hover h3 { color: #4D4356; transition: 300ms ease-in-out;}

		button.active:hover {
			background-color: #7c688d;
			outline: calc(var(--radius) / 2) solid #D9D9D9;
			outline-offset: -0.35rem;
			transition: 300ms ease-in-out;
			color: #242424; 
			-webkit-text-stroke-width: 0.04rem;
			-webkit-text-stroke-color: #242424;
		}

			 button.active:hover h3{
			transition: 300ms ease-in-out;
			color: #D9D9D9; 
		}

		.tag.active:hover {
			background-color: #7c688d;
			outline: calc(var(--radius) / 4) solid #242424;
			outline-offset: -0.25rem;
			transition: 300ms ease-in-out;
		}


		 .header:hover .name{
			color:#7c688d;
			transition: 300ms ease-in-out;
		 }


		 .header:hover .co{
			color:#7c688d;
			transition: 300ms ease-in-out;
		 }

		footer {
			height: calc(2 * var(--padding));
			width: 100%;
			position: fixed;
			inset-block-end: 0;
			background: linear-gradient(299deg,rgba(245, 245, 245, 1) 0%, rgba(245, 242, 235, 1) 51%, rgba(239, 228, 245, 1) 100%);
			transition: 300ms ease-in-out;
		}

		footer button {
			height: var(--padding);
			margin-block-start: calc(var(--padding) / 2);
			font-size: 0.8rem;
			border-radius: calc(var(--radius) /2); 
			transition: 300ms ease-in-out;
		}

		.footerstroke {
			width: 100%;
			background-color: #242424;
			height: var(--stroke);
			position: fixed;
			inset-block-end: calc(2 * var(--padding));
			transition: 300ms ease-in-out;
		}

		body {
			background: transparent;
	min-height: 100vh;                /* keep body at least viewport tall */
	margin: 0;
	padding-block: var(--padding);
	padding-block-end:calc(1.5 *var(--padding));
		}

		a {
			color: inherit;
			text-decoration: none;
		}

		.projectcontainer:hover .preview {
				opacity: 1;
				transition: 300ms ease-in-out;
		}

			.projectcontainer:hover .headshot {
				opacity: 0;
				transition: 300ms ease-in-out;
		}

		 .projectcontainer .preview {
				opacity: 0;
				transition: 300ms ease-in-out;
				position: absolute;
				inset-block-start: 0;
		}

		.projectcontainer .absolute {
				 opacity: 1;
				transition: 300ms ease-in-out;
				position: absolute;
				inset-block-start: 0;
		}

		/* -------- Custom Cursor -------- */

		.custom-cursor {
			position: fixed;
			inset-inline-start: 0;
			inset-block-start: 0;
			width: 64px;
			height: 64px;        /* set to your PNG size */
			z-index: 9999;
			pointer-events: none;
			opacity: 0;
			transform: translate(-50%, -50%) scale(var(--s, 1));
			transition: opacity .20s ease, transform .06s linear;
		}

		.custom-cursor .state {
			position: absolute; inset: 0;
			width: 100%; height: 100%;
			object-fit: contain;
			opacity: 0;
			transition: opacity .12s ease;
		}

		.custom-cursor.is-base  .state.base  { opacity: 1; }
		.custom-cursor.is-hover .state.hover { opacity: 1; }
		.custom-cursor.is-down  .state.down  { opacity: 1; }
		.custom-cursor.is-down { --s: .96; }


		.projectcontainer a.project-link {
	display: grid;
	grid-template-columns: inherit; /* keep same layout as parent */
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

	.projectcontainer3 {
	display: grid;
	grid-template-columns: inherit; /* keep same layout as parent */
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
	background-color: #4D4356;
			width: 99.5%;
			height: 30rem;
			border-radius: var(--radius);
			border: var(--stroke) solid #242424;
			color: #242424;
			font-family: aldrich;
			font-size: 1.3rem;
			display: grid;
			grid-template-columns: 2fr 1.41fr;
			overflow: hidden;
			clip-path: inset(0 round var(--radius));
			transition: 300ms ease-in-out;
			outline: none;
}

.projectcontainer a.project-link > * {
	pointer-events: none; /* ensures buttons inside still work visually */
}

 .inlinelink {
			font-family: aldrich, sans serif;
			text-decoration: underline;
			font-size: 0.9rem;
			color:#4D4356;
		}

		/* Touch devices: keep native cursor/touch */
		@media (pointer: coarse) {
			html, body, * { cursor: auto !important; }
			.custom-cursor { display: none !important; }
		}

		@media (width < 800px){
			:root {
				font-size: 90%;
			}

		}


		@media (width < 600px){
			:root {
				font-size: 70%;
			}

		}

				@media (width < 422px){
			:root {
				font-size: 50%;
			}

			 .footer button {
			font-size: 0.5rem;
		}

		}

		@media (max-width: 1140px) {

		 .name {
			font-size: 5.8vw;
		}

		sup {
			font-size: 4vw;
		}


		.cd {
			inset-block-end: calc(1.5 * var(--padding));
		}

		}