/* Subpage Styles */

:root {
	--font-xs: 0.9rem;
	--font-sm: 1rem;
	--font-base: 1.2rem;
	--font-md: 1.5rem;
	--font-lg: 2rem;
	--font-illu-xs: 1.2rem;
	--font-illu-sm: 1.5rem;
	--font-illu-base: 2rem;
	--font-illu-md: 2.5rem;
	--font-illu-lg: 3rem;

	--color-body-text: #d0d0d0;
	--color-body-background: #232323;
	--color-mode-design: #8b93ff;
	--color-mode-design-dark: #0a051ec2;
	--color-highlight-mode-design: #360eff;
	--color-mode-design-light: #b7bdff;
	--color-mode-illu: #ffda47;
	--color-meta-label: #aeaeae;
}

h1 {
	font-size: var(--font-lg);
};

h2 {
	font-size: var(--font-md);
}

h3 {
	font-size: var(--font-base);
	color: var(--color-mode-design-light);
	font-weight: 400;
}

h4 {
	font-size: var(--font-sm);
}

.subpage {
	background: var(--color-body-background);
	min-height: 100vh;
	height: 100%;
	width: 100%;
	overflow-y: auto;
}

/* Override style.css main styles for subpages */
.subpage main,
.subpage .subpage-main {
	overflow: visible;
	display: flex;
	flex-direction: column;
	position: relative;
	height: 100%;
	margin-top: 10vh;
}

.subpage-main {
	max-width: 1200px;
	margin: 0 auto;
	padding: 2.5em 0.2em;
}

.subpage-main .subpage-form {
	max-height: 100vh;
	height: 100%;
	align-items: center;
	margin-top: 2.5em;

}

/* Header */
.subpage-header {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
    align-items: center;
	padding: 1.5em 0 1.5em 0;
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	width: 1200px;
	max-width: 100%; /* Ensure it doesn't overflow on small screens */
	margin: 0 auto;
	border-bottom: 1px solid var(--color-body-text);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	gap: 1em;
	color: #ffffff;
	position: fixed;
	background: transparent;
	top: 0 !important;
	z-index: 1000;
  }
  

.subpage-header.scrolled {
	border-bottom-color: var(--color-mode-design-light);
	border-bottom-width: 1px;
	backdrop-filter: saturate(280%) blur(4px);
	background: linear-gradient(90deg, #232323, #23232333, transparent);
  }


.subpage-header.scrolled::before,
.subpage-header.scrolled::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  backdrop-filter: saturate(280%) blur(4px);
  pointer-events: none;
}

.subpage-header.scrolled::before {
  left: 0;
  background: linear-gradient(to right, #23232300, transparent);
}

.subpage-header.scrolled::after {
  right: 0;
  background: linear-gradient(to left, #23232333, transparent);
}

.subpage-header--illu.scrolled {
	border-bottom-color: var(--color-mode-illu);
  }

.subpage-header__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.subpage-header__title-section {
	display: flex;
	flex-direction: column;
	gap: 0;
	flex: 1;
}

.subpage-header--illu {
	border-bottom-color: rgba(224, 193, 67, 0.3);
}

/* Breadcrumbs */
.breadcrumbs {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-family: 'Caudex', serif;
	font-size: var(--font-base);
	color: var(--color-body-text);
	max-width: 1200px;
	z-index: 1000;
}

.breadcrumbs__item {
	color: var(--color-body-text);
	text-decoration: none;
	transition: color 0.3s ease;
}

.breadcrumbs__item:hover {
	color: var(--color-mode-design);
}

.breadcrumbs__item--current {
	color: var(--color-mode-design-light);
	cursor: default;
	pointer-events: none;
}

.breadcrumbs__item--current:hover {
	color: #fff;
}

.breadcrumbs__separator {
	color: var(--color-mode-design-light);
	margin: 0;
}

.breadcrumbs--illu {
	font-family: 'Square Peg', cursive;
	font-size: var(--font-illu-sm);
	color: #a2a19e;
}

.breadcrumbs--illu .breadcrumbs__item {
	color: #a2a19e;
}

.breadcrumbs--illu .breadcrumbs__item:hover {
	color: var(--color-mode-illu);
}

.breadcrumbs--illu .breadcrumbs__item--current {
	color: #fff;
}

.breadcrumbs--illu .breadcrumbs__item--current:hover {
	color: #fff;
}

.breadcrumbs--illu .breadcrumbs__separator {
	color: rgba(224, 193, 67, 0.5);
}

.back-link {	
	display: flex;
	align-items: left;
	justify-content: left;
	gap: 0.5em;
	font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: var(--font-base);
	color: #ffffff;
	text-decoration: none;
	transition: color 0.3s ease;
}

.back-link:hover {
	color: var(--color-mode-design);
}

.back-link--illu {
	font-family: 'Square Peg', cursive;
	text-transform: lowercase;
	font-size: var(--font-illu-base);
}

.back-link--illu:hover {
	color: var(--color-mode-illu);
}

.back-arrow {
	font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 700;
	font-size: var(--font-md);
	color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	text-align: left;
	vertical-align: middle;
}

.back-link--illu .back-arrow {
	font-size: var(--font-illu-base);
}

.subpage-title {
	font-family: 'Caudex', serif;
	font-size: var(--font-md);
	font-weight: 200;
	color: #fff;
	margin-bottom: 0.5em;
	letter-spacing: 1.5px;
}

.subpage-title--illu {
	font-family: 'Square Peg', cursive;
	font-weight: 400;
	font-style: normal;
	color: var(--color-mode-illu);
	font-size: var(--font-illu-lg) !important;
	line-height: 0.5 !important;
}

/* Title link in subpage header */
.subpage-header .title {
	justify-content: flex-end;
	gap: 12px;
	vertical-align: middle;
	padding-top: 0;
}

/* Section Titles */
.section-title {
	font-family: 'Caudex', serif;
	font-size: var(--font-md);
	font-weight: 300;
	color: #ffffff;
	border-bottom: none;
	border-image: none;
	text-align: left;
}

.subsection-title {
	font-family: 'Caudex', serif;
	font-size: var(--font-base);
	font-weight: 400;
	color: #fff;
	margin: 1.5em 0 0.75em;
	text-align: left;
}

.section-title--illu {
	font-family: 'Square Peg', cursive;
	color: rgba(224, 193, 67, 1);
	border-bottom-color: rgba(0, 0, 0, 0);
	font-size: var(--font-illu-md);
}

.section-title--experience {
	font-family: 'Caudex', serif;
	font-size: var(--font-md);
	font-weight: 300;
	color: #ffffff;
	border-bottom: 1px solid #464646;
	text-align: left;
	padding-bottom: 0.5em;

	margin-bottom: 1em;
}

.section-title--values {
	font-family: 'Caudex', serif;
	font-size: var(--font-md);
	font-weight: 300;
	color: #ffffff;
	border-bottom: 1px solid #464646;
	text-align: left;
	padding-bottom: 0.5em;
	margin-bottom: 1em;
	width: 100%;
}

	/* Values */

	.value-item {
		padding: 1.5em;
		border: 1px solid #464646;
		border-radius: 4px;
		background: rgba(255, 255, 255, 0.02);
		transition: all 0.3s ease;
	}

	.value-item:hover {
		border-color: var(--color-mode-design);
		background: rgba(108, 58, 255, 0.05);
	}

	.value-title {
		font-family: 'Caudex', serif;
		font-size: var(--font-base);
		font-weight: 400 !important;
		color: var(--color-mode-design) !important;
		margin: 0 0 0.75em;
	}

	.value-description {
		font-family: 'Caudex', serif;
		font-size: var(--font-base);
		color: var(--color-body-text);
		line-height: 1.7;
		margin: 0;
	}


.section-title--skills {
	font-family: 'Caudex', serif;
	font-size: var(--font-md);
	font-weight: 300;
	color: #ffffff;
	border-bottom: 1px solid #464646;
	text-align: left;
	padding-bottom: 0.5em;
	margin-bottom: 1em;
}

.section-title--education {
	font-family: 'Caudex', serif;
	font-size: var(--font-md);
	font-weight: 300;
	color: #ffffff;
	border-bottom: 1px solid #464646;
	text-align: left;
	padding-bottom: 0.5em;
	margin-bottom: 1em;
}

.section-description {
	font-family: 'Caudex', serif;
	font-size: var(--font-base);
	color: var(--color-body-text);
}

.section-description--illu {
	color: var(--color-body-text);
}

.experience-section {
	max-width: 1200px;
	margin: 4em 0;
}

.education-section {
	max-width: 1200px;
	margin: 4em 0;
}

.values-section {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 2em;
	max-width: 1200px;
	margin: 4em 0;
}

.values-grid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 2em;
	max-width: 1200px;
	margin: 1em 0;
}




.case-study-section {
	max-width: 1200px;
	margin: 4em 0;
	border-bottom: 1px solid #565656;
}



/* Projects Grid */
.projects-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2em;
	align-items: start;
	justify-content: flex-start;
}

.kanban-board {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	gap: 0.55em;
}

.kanban-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	position: relative;
	margin: 0 0 1.5em 0;
	gap: 1em;
	padding: 0.2em;
}

.kanban-board::-webkit-scrollbar {
	display: none;
}

.kanban-column {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	flex: 0 0 19%;
	width: 19%;
	height: fit-content;
	outline: 1px solid var(--color-mode-design);
	padding: 1em 0.8em 2em 0.8em;
	background: transparent;
	border: none;
	border-radius: 4px;
	scroll-snap-align: start;
	transition: transform 0.3s ease, opacity 0.3s ease;
	gap: 0.5em;
}

.kanban-column:hover {
	transform: translateY(-3px);
}



.kanban-column__title {
	font-family: 'Caudex', serif;
	font-size: var(--font-base);
	font-weight: 400;
	color: var(--color-mode-design-light);
	margin: 0.5em 0 1em 0;
	letter-spacing: 0.8px;
}

.kanban-column__cards {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.5em;
}

.kanban-card {
	padding: 1em;
	background: var(--color-mode-design-dark);
	border-radius: 4px;
	transition: all 0.3s ease;
	cursor: default;
}

.kanban-card:hover {
	border: 1px solid var(--color-mode-design);
	background: rgba(0, 0, 0, 0.05);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.kanban-card__title {
	font-family: 'Caudex', serif;
	font-size: var(--font-base);
	font-weight: 4
	00;
	color: var(--color-mode-design);
	margin: 0 0 0.5em;
}

.kanban-card__description {
	font-family: 'Caudex', serif;
	font-size: var(--font-sm);
	color: var(--color-body-text);
	line-height: 1.6;
	margin: 0;
}

/* Project Card */
.project-card {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid #464646;
	border-radius: 4px;
	padding: 1em;
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 380px;
	overflow: visible;
}

.project-card:hover {
	border-color: var(--color-mode-design);
	background: rgba(108, 58, 255, 0.05);
	transform: translateY(-2px);
}

.project-card--aboutme {
	height: fit-content;
	gap: 1em;
}

.project-card--link {
	display: block;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.project-card--link:hover {
	text-decoration: none;
	color: inherit;
}

.project-card--illu {
	border-color: rgba(224, 193, 67, 0.3);
	padding: 1em;
}

.project-card--illu:hover {
	border-color: var(--color-mode-illu);
	background: rgba(224, 193, 67, 0.05);
}

/* Compact Project Card Variant */
.project-card--compact {
	padding: 2em;
	height: 204px;
	align-self: flex-start;
	vertical-align: top;
}

/* Project Card Image */
.project-card__image {
	width: 100%;
	height: 140px;
	flex-shrink: 0;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.05);
}

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

/* Featured cards now look like regular cards */

.project-card__content {
	padding: 1em;
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: visible;
}

.project-card__content--illu {
	font-family: 'Square Peg', cursive;
	font-size: var(--font-illu-base);
	color: var(--color-mode-illu);
	letter-spacing: 1px;
	margin: 0;
	padding: 1em;
}

.project-card__year {
	font-family: 'Caudex', serif;
	font-size: var(--font-sm);
	color: var(--color-mode-design);
	letter-spacing: 1px;
}

.project-card__year--illu {
	font-family: 'Square Peg', cursive;
	color: var(--color-mode-illu);
	font-size: var(--font-illu-sm);
	font-weight: 600;
}

.project-card__title {
	font-family: 'Caudex', serif;
	font-size: var(--font-base);
	font-weight: 400;
	color: #fff;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0;
	padding: 0;
}

.project-card__title--illu {
	font-family: Caudex, sans-serif;
	font-size: var(--font-md);

}

.project-card__client {
	font-family: 'Caudex', serif;
	font-size: var(--font-base);
	color: var(--color-mode-design);
	letter-spacing: 1.5px;
	margin: 0;
	padding: 0;
}

.project-card__client--illu {
	font-family: Square Peg, cursive;
	color: var(--color-mode-illu);
	font-size: var(--font-illu-md);
	line-clamp: 2;
	-webkit-line-clamp: 2;
}

.project-card__description {
	font-family: 'Caudex', serif;
	font-size: var(--font-sm);
	color: #a29f9f;
	line-height: 1.7;
	display: -webkit-box;
	line-clamp: 2;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex: 0 1 auto;
	min-height: 0;
}

.project-card__description--illu {
	font-family: 'Caudex', serif;
	font-size: var(--font-sm);
}

/* Tags */
.project-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-top: auto;
	flex-shrink: 0;
	overflow: visible;
	color: #e8e8e8;
}



/* About Me */

/* Timeline */
.timeline {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	max-width: 70%;
}

.timeline-item {
	padding-left: 1em;
	padding-bottom: 3em;
	border-left: 2px dotted var(--color-body-text);
	position: relative;
	margin-left: 1.5em;
}

.timeline-item__last {
	padding-bottom: 0;	
}

.timeline-item::before {
	content: '';
	position: absolute;
	left: -6px;
	top: 1;
	width: 10px;
	height: 10px;
	background: var(--color-mode-design);
	border-radius: 50%;
}

.timeline-year {
	font-family: 'Caudex', serif;
	font-size: var(--font-base);
	color: var(--color-mode-design);
	margin-bottom: 0.5em;
	position: sticky;
	top: 5.2rem;
	 /* top: 4.3em; adjust based on your header height + desired spacing */
	z-index: 100;
	background-color: var(--color-body-background); /* optional: add background so content doesn't show through */
	padding: 0.5em 0;
	justify-items: center;
	height: 2.5em;
	width: 100%;
	  }

.timeline-title {
	font-family: 'Caudex', serif;
	font-size: var(--font-base);
	font-weight: 400;
	color: #fff;
	position: sticky;
	top: 7.7rem;
	z-index: 10;
	background-color: var(--color-body-background); /* optional: add background so content doesn't show through */
	padding: 0.5em 0;
	margin: 0 0 0.25em;
	justify-items: center;
	height: 2.5em;
	width: 100%;
}



.timeline-company {
	font-family: 'Caudex', serif;
	font-size: var(--font-base);
	color: var(--color-mode-design);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	position: sticky;
	top: 10.2rem;
	z-index: 1;
	background-color: var(--color-body-background); /* optional: add background so content doesn't show through */
	padding: 0.5em 0;
	justify-items: center;
	height: 2.5em;
	width: 100%;
	margin: 0 0 1em;
}

.timeline-description {
	font-family: 'Caudex', serif;
	font-size: var(--font-base);
	color: var(--color-body-text);
	width: 100%;
	line-height: 1.7;
	margin: 0;
}

.tag {
	font-family: 'Trebuchet MS', sans-serif;
	font-size: var(--font-xs);
	color: #bababa;
	background: rgba(13, 2, 33, 0.162);
	padding: 0.35em 0.75em;
	border-radius: 2px;
	letter-spacing: 0.3px;
	border: 1px solid #464646;
	white-space: nowrap;
	flex-shrink: 2;
	min-width: 0;
	position: relative;
	cursor: pointer;
}

.tag:hover {
	background: rgba(0, 0, 0, 0.424);
}

.tag--illu {
	border-color: rgba(224, 193, 67, 0.2);
	color: #fff;
	font-size: var(--font-sm);
}

.tag--illu:hover {
	border-color: var(--color-mode-illu);
	background: rgba(224, 193, 67, 0.05);
	color: rgb(255, 226, 109);
}

.tag--skills {
	align-items: center;
	justify-content: center;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	text-transform: none;
	border-color: var(--color-mode-design);
	color: #fff;
	width: fit-content;
}

.tag--skills:hover {
	color: var(--color-mode-design-light);

}

.skills-tags {
	font-size: var(--font-sm) !important;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1em;
	overflow: visible;
	position: relative;
}

/* Custom Tooltips */
.tag[data-tooltip] {
	position: relative;
}

.tag[data-tooltip]:hover::before,
.tag[data-tooltip]:focus::before {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 0.75em);
	left: 50%;
	transform: translateX(-50%);
	padding: 0.75em 1em;
	background: #1a1a1a;
	border: 1px solid var(--color-mode-design);
	border-radius: 4px;
	color: #fff;
	font-family: 'Caudex', serif;
	font-size: var(--font-sm);
	line-height: 1.5;
	white-space: normal;
	width: 280px;
	max-width: calc(100vw - 2em);
	z-index: 1000;
	pointer-events: none;
	text-transform: none;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
	opacity: 1;
	word-wrap: break-word;
}

.tag[data-tooltip]:hover::after,
.tag[data-tooltip]:focus::after {
	content: '';
	position: absolute;
	bottom: calc(100% + 0.5em);
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: var(--color-mode-design);
	z-index: 1001;
	pointer-events: none;
	opacity: 1;
}

/* Illustration mode tooltip colors */
.tag--illu[data-tooltip]:hover::before,
.tag--illu[data-tooltip]:focus::before {
	border-color: var(--color-mode-illu);
	background: #1a1a1a;
}

.tag--illu[data-tooltip]:hover::after,
.tag--illu[data-tooltip]:focus::after {
	border-top-color: var(--color-mode-illu);
}

/* Case Study Card */
.case-study-tags {
	display: flex;
    flex-direction: row;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-bottom: 2em;
}

.case-study-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 2em;
	margin-bottom: 2em;
	padding-bottom: 2em;
	border-bottom: 1px solid #464646;
	}

.meta-item {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.meta-label {
	font-family: 'Courier New', Courier, monospace;
	font-size: var(--font-base);
	font-weight: 400;
	color: var(--color-meta-label);
	text-transform: lowercase;
}

.meta-value {
	font-family: 'Caudex', serif;
	font-size: var(--font-base);
	color: var(--color-mode-design);
	text-transform: uppercase;
	letter-spacing: 1px;
}

.meta-value .external-link {
	color: var(--color-mode-design);
	text-decoration: none;
	transition: color 0.3s ease;
}

.meta-value .external-link:hover {
	color: #fff;
	text-decoration: underline;
}

.case-study-card {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid #464646;
	border-radius: 4px;
	padding: 0;
	transition: all 0.3s ease;
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	width: 100%;
	height: 680px;
	overflow: hidden;
}

.case-study-card:hover {
	border-color: var(--color-mode-design);
	background: rgba(108, 58, 255, 0.05);
	transform: translateY(-2px);
}

.case-study-card--link {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	align-content: flex-start;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.case-study-card--link:hover {
	text-decoration: none;
	color: inherit;
}

/* Case Study Card Image */
.case-study-card__image {
	width: 100%;
	height: 60%;
	flex-shrink: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
    align-items: center;
	background: var(--color-body-background);
}

.case-study-card__image img {

	width: 100%;
	height: auto;
	flex-shrink: 0;
    align-self: stretch;
	object-fit: contain;
	object-position: center;
}

.case-study-card__content {
	padding: 1em;
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 2;
	overflow: visible;
}

.case-study-card__year {
	font-family: 'Caudex', serif;
	font-size: var(--font-sm);
	color: var(--color-mode-design);
	margin-bottom: 0.5em;
	letter-spacing: 1px;
}

.case-study-card__title {
	font-family: 'Caudex', serif;
	font-size: var(--font-base);
	font-weight: 400;
	color: #fff;
	margin: 0 0 0.25em;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.case-study-card__client {
	font-family: 'Caudex', serif;
	font-size: var(--font-base);
	color: var(--color-mode-design);
	margin: 0 0 1em;
	text-transform: uppercase;
	letter-spacing: 1.5px;
}

.case-study-card__description {
	font-family: 'Caudex', serif;
	font-size: var(--font-base);
	color: var(--color-body-text);
	line-height: 1.7;
	margin: 0 0 1em;
	display: flex;
	flex-direction: row; 
	flex-wrap: wrap;
	text-overflow: ellipsis;
	overflow: hidden;
	gap: 0.5em;
	width: 90%;
	height: 3.5em;
}

/* Case Study Card Tags */
.case-study-card__tags {
	display: flex;
	align-items: flex-start;
	flex-wrap: nowrap;
	flex-direction: row;
	gap: 0.5em;
	flex-shrink: 0;
	overflow: hidden;
	color: var(--color-body-text);
	line-clamp: 1;
	-webkit-line-clamp: 1;
}

.skills-grid {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 1em;
	overflow: visible;
	justify-content: space-between;
}

.skills-category {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding-bottom: 2em;
	overflow: visible;
}

.skills-category__card {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	border: 1px solid #464646;
	background: rgba(255, 255, 255, 0.02);
	padding: 0.5em 0.5em 1.5em 1.5em;
	border-radius: 4px;
}

/* Publications Section */
.publications-section {
	margin-top: 2em;
}

/* Illustrations Section */
.illustrations-section {
	margin-bottom: 2em;
}

.illustrations-section:first-of-type .section-title {
	margin-top: 0;
}

.intro-text {
	font-family: 'Caudex', serif;
	font-size: var(--font-base);
	color: var(--color-body-text);
	line-height: 1.8;
	margin: 0 0 1.5em;
	max-width: 70%;
}

/* Footer */
.subpage-footer {	
	font-size: var(--font-base);
	padding-top: 3em;
	padding-bottom: 2em;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	justify-content: flex-end;
	border-top: none;
	border-image: none;
	max-width: 100%; /* Ensure it doesn't overflow on small screens */
}

.subpage-footer--illu {
	border-top-color: rgba(224, 193, 67, 0.3);
	font-family: 'Square Peg', cursive;
	font-size: var(--font-illu-base);
}

.social-links {
	display: flex;
	gap: 2em;
}

.social-links--illu {
	font-family: 'Square Peg', cursive;
	font-size: var(--font-illu-base);
	color: var(--color-mode-illu);
}

.social-link {
	text-decoration: none;
	text-transform: lowercase;
	transition: color 0.3s ease;
}

.social-link--design {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1em;
}

.social-link--design img {
	max-width: 1.5em;
	max-height: 1.5em;
}

.social-link--design:hover {
	color: var(--color-mode-design);
	transform: scale(1.1);
	transition: transform 0.3s ease;
}

.social-link--illu {
	color: var(--color-mode-illu);
}

.social-link:hover {
	color: var(--color-mode-design);

}

.vl {
	color: var(--color-mode-design);
	height: 100%;
	width: 2px;
	background-color: var(--color-mode-design);
  }

/* This is the only breakpoint. Everything after this is for mobile and small screens */

@media screen and (max-width: 1200px) {

	.subpage-main {
		padding: 1.5em;
	}

	.breadcrumbs {
		font-size: var(--font-base);
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.breadcrumbs__item {
		color: white;
	}

	.breadcrumbs__separator {
		color: var(--color-mode-design);
	}

	.breadcrumbs__item--current {
		color: var(--color-mode-design-light);
	}

	.back-arrow {
		color: white;
		font-size: var(--font-base);
	}
	.subpage-title {
		font-size: var(--font-md);
	}

	.projects-grid {
		padding: 0;
		grid-template-columns: 1fr;
		gap: 2em;
	}

	.project-card {
		height: auto;
		min-height: 420px;
	}

	.project-card__content {
		padding: 1em;
	}
	.subpage-header {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-content: center;
		align-items: center;
		padding: 1.5em;
			left: 50%;
			right: auto;
			transform: translateX(-50%);
			width: 1200px;
			max-width: 100%; /* Ensure it doesn't overflow on small screens */
		  	margin: 0 auto;
		border-bottom: 1px solid var(--color-body-text);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		gap: 1em;
		color: #ffffff;
		position: fixed;
		background: linear-gradient(90deg, #232323, #23232333, transparent);
		backdrop-filter: saturate(280%) blur(4px);
		top: 0;
		z-index: 1000;
	  }

	.subpage-footer {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: center;
		gap: 2em;
		align-items: flex-start;
		padding-bottom: 4em;
	}
	

	.experience-section {
		max-width: 800px;
		margin: 0;
	}

	.project-card__title {
		font-size: var(--font-base);
	}

	.case-study-card__title {
		font-size: var(--font-base);
	}

	.section-title {
		font-size: var(--font-md);
	}


	.about-intro-section,
	.experience-section .education-section .values-section .publications-section .my-process-section {
		margin-bottom: 1em;
		margin: 0em;
	}


	.kanban-container {
		display: flex;
		flex-direction: column;
		gap: 1em;
		margin: 0;
		}
	

	.kanban-column__cards {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.5em;
	}


	.case-study-card {
		background: rgba(255, 255, 255, 0.02);
		border: 1px solid #464646;
		border-radius: 4px;
		padding-bottom: 1em;
		transition: all 0.3s ease;
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		width: 100%;
		height: fit-content;
		overflow: hidden;
	}

.case-study-card__content {
	display: flex;
	flex-direction: column; 
	flex-wrap: wrap;
	height: fit-content;
}
	
.case-study-card__year {
	font-family: 'Caudex', serif;
	font-size: var(--font-sm);
	color: var(--color-mode-design);
	margin-bottom: 0.5em;
	letter-spacing: 1px;
	display: flex;
	flex-direction: row; 
	flex-wrap: wrap;
	height: fit-content;
	width: 60%;
}

.case-study-card__title {
	font-family: 'Caudex', serif;
	font-size: var(--font-base);
	font-weight: 400;
	color: #fff;
	margin: 0 0 0.25em;
	line-height: 1.3;
	display: flex;
	flex-direction: row; 
	flex-wrap: wrap;
	text-wrap: wrap;
	gap: 0.5em;
	height: fit-content;
	width: 100%;
}

.case-study-card__client {
	font-family: 'Caudex', serif;
	font-size: var(--font-sm);
	color: var(--color-mode-design);
	margin: 0 0 1em;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	display: flex;
	flex-direction: row; 
	flex-wrap: wrap;
	gap: 0.5em;
	height: fit-content;
	width: 100%;
}

.case-study-card__description {
	display: none;
	/* font-family: 'Caudex', serif;
	font-size: var(--font-sm);
	color: #a29f9f;
	line-height: 1.7;
	margin: 0 0 1em;
	flex-direction: row; 
	flex-wrap: wrap;
	gap: 0.5em; */
	
}

/* Case Study Card Tags */
.case-study-card__tags {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.5em;
	overflow: hidden;
	color: #e8e8e8;
}
	/* About & Collab Page Styles */

	.intro-text {
		font-family: 'Caudex', serif;
		color: var(--color-body-text);
		line-height: 1.8;
		margin: 0 0 1.5em;
		font-size: var(--font-base);
		max-width: 100%;
	}
	

	.about-intro,
	.collab-intro {
		margin-bottom: 0;
	}

	/* Timeline */
	.timeline {
		display: flex;
		flex-direction: column;
		gap: 0;
		max-width: 100%;
	}

	.timeline-item {
		padding-left: 0.8em;
		padding-bottom: 3em;
		border-left: 2px dotted var(--color-body-text);
		position: relative;
		margin-left: 0.5em;
	}

	.timeline-item::before {
		content: '';
		position: absolute;
		left: -6px;
		top: 1;
		width: 10px;
		height: 10px;
		background: var(--color-mode-design);
		border-radius: 50%;
	}

	.timeline-year {
		font-family: 'Caudex', serif;
		font-size: var(--font-base);
		color: var(--color-mode-design);
		position: sticky;
		top: 5.2rem;
		 /* top: 4.3em; adjust based on your header height + desired spacing */
		z-index: 100;
		background-color: var(--color-body-background); /* optional: add background so content doesn't show through */
        padding: 0.5em 0;
        justify-items: center;
        height: 2.5em;
		width: 100%;
		  }
	

	.timeline-title {
		font-family: 'Caudex', serif;
		font-size: var(--font-base);
		font-weight: 400;
		color: #fff;
		position: sticky;
		top: 7.7rem;
		z-index: 10;
		background-color: var(--color-body-background); /* optional: add background so content doesn't show through */
        justify-items: center;
        height: 2.5em;
		width: 100%;
		padding-bottom: 1em;
	}

	.timeline-company {
		font-family: 'Caudex', serif;
		font-size: var(--font-base);
		color: var(--color-mode-design);
		text-transform: uppercase;
		letter-spacing: 1.5px;
		position: sticky;
		top: 10.2rem;
		z-index: 1;
		background-color: var(--color-body-background); /* optional: add background so content doesn't show through */
        padding: 1em 0;
        justify-items: center;
        height: 2.5em;
		width: 100%;
	}

	.timeline-company.scrolled { 	
		border-bottom-color: var(--color-mode-design-light);
		border-bottom-width: 1px;
	}

	.timeline-description {
		font-family: 'Caudex', serif;
		font-size: var(--font-base);
		color: var(--color-body-text);
		width: 100%;
		line-height: 1.7;
		margin: 0;
	}

	/* Skills Section */
	

	.skills-category {
		display: flex;
		flex-direction: column;
		padding: 1.5em;
		overflow: visible;
	}


	.skills-category__title {
		font-family: 'Caudex', serif;
		font-size: var(--font-base);
		font-weight: 400;
		color: #ffffff;
		letter-spacing: 1.5px;
		margin: 0;
		margin-bottom: 1em;
	}
.skills-grid {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 1em;
	overflow: visible;
	justify-content: space-between;
}
	.skills-tags {
		font-size: var(--font-sm) !important;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 1em;
		overflow: visible;
		position: relative;
	}

	/* Values */
	

	.value-item {
		max-width: 320px;
		padding: 1.5em;
		border: 1px solid #464646;
		border-radius: 4px;
		background: rgba(255, 255, 255, 0.02);
		transition: all 0.3s ease;
	}

	.value-item:hover {
		border-color: var(--color-mode-design);
		background: rgba(108, 58, 255, 0.05);
	}

	.value-title {
		font-family: 'Caudex', serif;
		font-size: var(--font-base);
		font-weight: 400 !important;
		color: var(--color-mode-design) !important;
		margin: 0 0 0.75em;
	}

	.value-description {
		font-family: 'Caudex', serif;
		font-size: var(--font-base);
		color: var(--color-body-text);
		line-height: 1.7;
		margin: 0;
	}

	/* Contact Section */
	.contact-section {
		margin-top: 2em;
	}

	.contact-grid {
		display: flex;
		flex-direction: column;
		gap: 2em;
	}

	.contact-text {
		font-family: 'Caudex', serif;
		font-size: var(--font-base);
		color: var(--color-body-text);
		line-height: 1.8;
		margin: 0 0 2em;
	}


	.contact-links {
		display: flex;
		flex-direction: column;
		gap: 1em;
	}

	.contact-link-item {
		display: flex;
		flex-direction: column;
		padding: 1.25em 1.5em;
		background: rgba(255, 255, 255, 0.02);
		border: 1px solid #464646;
		border-radius: 4px;
		text-decoration: none;
		transition: all 0.3s ease;
	}

	.contact-link-item:hover {
		border-color: var(--color-mode-design);
		background: rgba(108, 58, 255, 0.05);
		transform: translateX(4px);
	}

	.contact-label {
		font-family: 'Caudex', serif;
		font-size: var(--font-sm);
		color: var(--color-mode-design);
		text-transform: lowercase;
		font-weight: 400;
		margin-bottom: 0.25em;
	}

	.contact-value {
		font-family: 'Caudex', serif;
		font-size: var(--font-base);
		color: #fff;
	}



	.social-links--design {
		font-family: 'Caudex', serif;
		font-size: var(--font-base);
		color: var(--color-mode-design);
		text-transform: none;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: right;
		width: 1em;
	    height: 1em;
		gap: 0.5em;
	}


	/* Contact Info in Footer */
	.contact-info {
		margin: 2em 0;
		padding: 2em 0;
		border-top: 1px solid #464646;
		border-bottom: 1px solid #464646;
	}

	.contact-item {
		font-family: 'Caudex', serif;
		font-size: var(--font-base);
		color: #a29f9f;
		margin: 0 0 1em;
		display: flex;
		flex-wrap: wrap;
		gap: 0.5em;
		align-items: center;
	}

	.contact-link {
		font-family: 'Caudex', serif;
		font-size: var(--font-base);
		color: #a29f9f;
		text-decoration: none;
		transition: color 0.3s ease;
	}

	.contact-link:hover {
		color: var(--color-mode-design);
	}


	.back-link {
		display: flex;
		align-items: left;
		gap: 0.5em;
		font-family: Caudex;
		font-size: var(--font-base);
		color: #ffffff;
		text-decoration: none;
		transition: color 0.3s ease;
	}


	.back-link--illu {
		font-family: 'Square Peg', cursive;
		text-transform: lowercase;
		font-size: var(--font-illu-base);
	}


	/* Education Section */
	.education-section {
		margin-top: 3em;
	}

	/* Responsive additions */


		.contact-link-item {
			padding: 1em;
		}
	

	/* Case Study Detail Pages */
	.case-study-title {
		margin: none;
	}

	.case-study-content {
		margin-top: 2em;
	}

	.case-study-meta {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 2em;
		margin-bottom: 2em;
		padding-bottom: 2em;
		border-bottom: 1px solid #464646;
		}

	.meta-item {
		display: flex;
		flex-direction: column;
		gap: 0.5em;
	}

	.meta-label {
		font-family: 'Caudex', serif;
		font-size: var(--font-base);
		color: var(--color-meta-label);
		text-transform: lowercase;
	}

	.meta-value {
		font-family: 'Caudex', serif;
		font-size: var(--font-base);
		color: var(--color-mode-design);
		text-transform: uppercase;
		letter-spacing: 1px;
	}

	.meta-value .external-link {
		color: var(--color-mode-design);
		text-decoration: none;
		transition: color 0.3s ease;
	}

	.meta-value .external-link:hover {
		color: #fff;
		text-decoration: underline;
	}

	.case-study-tags {
		display: flex;
	    flex-direction: row;
		flex-wrap: wrap;
		gap: 0.5em;
		margin-bottom: 2em;
	}

	.case-study-body {
		max-width: 800px;
	}

	.feature-list {
		list-style: none;
		padding: 0;
		margin: 1.5em 0;
	}

	.feature-list li {
		font-family: 'Caudex', serif;
		font-size: var(--font-base);
		color: #a29f9f;
		line-height: 1.8;
		padding-left: 1.5em;
		position: relative;
		margin-bottom: 0.75em;
	}

	.feature-list li::before {
		content: '—';
		position: absolute;
		left: 0;
		color: var(--color-mode-design);
	}

	/* Case Study Visual Elements */
	.case-study-visual {
		margin: 3em 0;
		padding: 2em 0;
		border-top: 1px solid #464646;
		border-bottom: 1px solid #464646;
	}

	.visual-title {
		font-family: 'Caudex', serif;
		font-size: var(--font-base);
		font-weight: 400;
		color: #fff;
		margin: 0 0 1em;
	}

	.pdf-container {
		margin: 2em 0;
		width: 100%;
		max-width: 100%;
		overflow: hidden;
		background: #1a1a1a;
		border-radius: 4px;
	}

	.pdf-container iframe {
		display: block;
		width: 100%;
		min-height: 600px;
		background: #fff;
	}

	.pdf-download-link {
		color: var(--color-mode-design);
		text-decoration: none;
		transition: color 0.3s ease;
	}

	.pdf-download-link:hover {
		color: #fff;
		text-decoration: underline;
	}

	/* Atomic Design Visual Styles */
	.atomic-design-combined,
	.atomic-design-hierarchy,
	.atomic-design-application,
	.jira-structure {
		margin: 2em 0;
	}

	.atomic-comparison-section {
		margin: 3em 0;
		width: 100%;
	}

	.atomic-comparison-title {
		font-family: 'Caudex', serif;
		font-size: var(--font-base);
		font-weight: 400;
		color: var(--color-mode-design);
		margin: 0 0 1.5em;
		text-transform: capitalize;
	}

	.atomic-comparison-images {
		display: grid;
		grid-template-columns: 1fr;
		gap: 2em;
		width: 100%;
		align-items: start;
	}

	.atomic-comparison-item {
		display: flex;
		flex-direction: column;
		width: 100%;
		gap: 0.75em;
	}

	.atomic-comparison-label {
		font-family: 'Caudex', serif;
		font-size: var(--font-sm);
		color: #a29f9f;
		margin: 0;
		text-align: left;
	}

	.atomic-comparison-image {
		width: 100%;
		height: auto;
		display: block;
		border-radius: 4px;
		background: rgba(255, 255, 255, 0.02);
		padding: 1em;
		border: 1px solid #464646;
		transition: all 0.3s ease;
	}

	.atomic-comparison-image:hover {
		border-color: var(--color-mode-design);
		background: rgba(108, 58, 255, 0.05);
	}

	.atomic-levels {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 1.5em;
		margin: 2em 0;
		align-items: start;
	}

	.atomic-level {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1em;
	}

	.atomic-image {
		width: 100%;
		height: auto;
		max-width: 100%;
		display: block;
		border-radius: 4px;
		background: rgba(255, 255, 255, 0.02);
		padding: 1em;
		border: 1px solid #464646;
		transition: all 0.3s ease;
	}

	.atomic-image:hover {
		border-color: var(--color-mode-design);
		background: rgba(108, 58, 255, 0.05);
	}

	.atomic-label {
		font-family: 'Caudex', serif;
		font-size: var(--font-sm);
		color: var(--color-mode-design);
		text-align: center;
		margin: 0;
		text-transform: capitalize;
	}

	.jira-visual {
		margin: 2em 0;
		width: 100%;
	}

	.jira-image {
		width: 100%;
		height: auto;
		max-width: 100%;
		display: block;
		border-radius: 4px;
		background: rgba(255, 255, 255, 0.02);
		padding: 1em;
		border: 1px solid #464646;
	}
		.pdf-container iframe {
			min-height: 400px;
		}

		.case-study-visual {
			margin: 2em 0;
			padding: 1.5em 0;
		}

		.atomic-levels {
			grid-template-columns: 1fr;
			gap: 2em;
		}

		.atomic-level {
			max-width: 100%;
		}

		.atomic-comparison-images {
			grid-template-columns: 1fr;
			gap: 2em;
		}

		.atomic-comparison-section {
			margin: 2em 0;
		}
	

	/* Kanban Board Styles */

	.kanban-board {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 1.5em;
		overflow-y: visible;
		padding: 1em 0;
		background: transparent;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		scroll-snap-type: x proximity;
	}

	.kanban-board::-webkit-scrollbar {
		display: none;
	}

	.kanban-column {
		flex: 0 0 auto;
		width: fit-content;
		display: flex;
		flex-direction: column;
		background: transparent;
		border: none;
		border-radius: 4px;
		padding: 1.5em;
		height: fit-content;
		scroll-snap-align: start;
		transition: transform 0.3s ease, opacity 0.3s ease;
	}

	.kanban-column:hover {
		transform: translateY(-4px);
	}

	.kanban-column__header {
		padding-bottom: 1em;
	}

	.kanban-column__title {
		font-family: 'Caudex', serif;
		font-size: var(--font-base);
		font-weight: 400;
		color: white;
		margin: 0 0 0.75em;
		letter-spacing: px;
	}

	.kanban-column__description {
		font-family: 'Caudex', serif;
		font-size: var(--font-base);
		color: var(--color-body-text);
		line-height: 1.6;
		margin: 0;
	}

	.kanban-card {
		background: var(--color-mode-design-dark);
		border-radius: 4px;
		padding: 1.25em;
		transition: all 0.3s ease;
		cursor: default;
		outline: 1px solid var(--color-mode-design);
	}

	.kanban-card:hover {
		border-color: var(--color-mode-design);
		background: rgba(108, 58, 255, 0.05);
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	}

	.kanban-card__title {
		font-family: 'Caudex', serif;
		font-size: var(--font-base);
		font-weight: 400;
		color: var(--color-mode-design);
		margin: 0 0 0.5em;
	}

	.kanban-card__description {
		font-family: 'Caudex', serif;
		font-size: var(--font-sm);
		color: #a29f9f;
		line-height: 1.6;
		margin: 0;
	}

	.social-links {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: left;
		justify-content: center;
		gap: 1em;
	}
}