/*
Theme Name:   Twenty Twenty-Five Child
Theme URI:    https://wordpress.org/themes/twentytwentyfive/
Description:  Portfolio child theme for Twenty Twenty-Five.
Author:       Your name
Template:     twentytwentyfive
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive-child
*/

/*
 * Add custom styles below. Parent theme styles load first.
 */

/* Smooth in-page navigation; adjust offset to match sticky header height */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 5.5rem;
}

/* Header bar: dark, premium, subtle edge glow */
.portfolio-header-bar {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(10, 12, 18, 0.82);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.03) inset,
		0 8px 40px rgba(0, 0, 0, 0.35),
		0 0 60px rgba(80, 130, 255, 0.06);
}

/*
 * Full-screen overlay: backdrop-filter on the sticky header creates a containing block,
 * so position:fixed on .wp-block-navigation__responsive-container is sized to the header
 * (~one row) instead of the viewport. Drop blur while the nav modal is open.
 */
html.has-modal-open .portfolio-header-bar,
.portfolio-header-bar:has(.wp-block-navigation__responsive-container.is-menu-open) {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Overlay links: match site focus style instead of default blue box */
.portfolio-header-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid rgba(160, 190, 255, 0.85);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Three-zone row: brand | centered nav | LinkedIn */
.portfolio-header-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 1rem;
	width: 100%;
}

.portfolio-header-row .portfolio-header-brand {
	flex: 0 0 auto;
	align-items: center;
}

.portfolio-header-row .portfolio-header-nav-wrap {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 0;
}

.portfolio-header-row .portfolio-header-nav-wrap .wp-block-navigation {
	justify-content: center;
}

.portfolio-header-row .portfolio-header-social,
.portfolio-header-row > .wp-block-html {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.portfolio-header-linkedin {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	color: rgba(244, 246, 255, 0.85);
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.04);
	transition:
		color 0.2s ease,
		background 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.portfolio-header-linkedin:hover,
.portfolio-header-linkedin:focus {
	color: #fff;
	background: rgba(10, 102, 194, 0.2);
	border-color: rgba(10, 102, 194, 0.45);
	box-shadow: 0 0 20px rgba(10, 102, 194, 0.2);
	transform: translateY(-1px);
}

.portfolio-header-linkedin:focus-visible {
	outline: 2px solid rgba(160, 190, 255, 0.85);
	outline-offset: 2px;
}

.portfolio-header-brand {
	align-items: center;
}

.portfolio-header-brand .portfolio-header-logo {
	flex-shrink: 0;
	margin: 0;
}

.portfolio-header-brand .portfolio-header-logo a {
	display: block;
	line-height: 0;
}

.portfolio-header-brand .portfolio-header-logo img {
	display: block;
	width: 40px;
	height: auto;
	border-radius: 8px;
}

.portfolio-header-bar .wp-block-site-title {
	margin: 0;
	line-height: 1.2;
}

.portfolio-header-bar .wp-block-site-title a {
	color: #f4f6ff;
	text-decoration: none;
	transition: color 0.2s ease, text-shadow 0.2s ease;
}

.portfolio-header-bar .wp-block-site-title a:hover,
.portfolio-header-bar .wp-block-site-title a:focus {
	color: #fff;
	text-shadow: 0 0 20px rgba(130, 170, 255, 0.35);
}

/* Primary nav links (block markup) */
.portfolio-header-bar .wp-block-navigation .wp-block-navigation-item__content {
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: rgba(244, 246, 255, 0.85);
	transition: color 0.2s ease, text-shadow 0.2s ease;
}

.portfolio-header-bar .wp-block-navigation .wp-block-navigation-item__content:hover,
.portfolio-header-bar .wp-block-navigation .wp-block-navigation-item__content:focus {
	color: #fff;
	text-shadow: 0 0 18px rgba(130, 170, 255, 0.35);
}

.portfolio-header-bar .wp-block-navigation .current-menu-item .wp-block-navigation-item__content {
	color: #fff;
}

/*
 * Navigation: core uses 600px — below that the hamburger shows; between 600px–~960px
 * the horizontal list still appears and wraps. Force overlay + hamburger up to 959px.
 */
@media (max-width: 959px) {
	.portfolio-header-row {
		gap: 0.5rem;
	}

	.portfolio-header-brand {
		min-width: 0;
	}

	.portfolio-header-row .portfolio-header-nav-wrap {
		justify-content: flex-end;
		flex: 1 1 auto;
		min-width: 0;
	}

	.portfolio-header-bar .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
		align-items: center;
		justify-content: center;
		color: rgba(244, 246, 255, 0.92);
	}

	.portfolio-header-bar .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	.portfolio-header-bar .wp-block-navigation__responsive-container.is-menu-open {
		display: flex !important;
	}
}

/* -------------------------------------------------------------------------
   Global dark canvas (portfolio)
   ------------------------------------------------------------------------- */
body {
	background-color: #0a0c12;
	color: #e8eaf2;
}

/* -------------------------------------------------------------------------
   Hero — two columns, strong type, CTAs, portrait placeholder
   ------------------------------------------------------------------------- */
.portfolio-hero {
	position: relative;
	overflow: hidden;
	min-height: 0;
	padding-top: 32px !important;
	padding-bottom: 0 !important;
	padding-left: 180px !important;
	padding-right: 180px !important;
	background:
		radial-gradient(ellipse 80% 55% at 70% 20%, rgba(88, 120, 255, 0.09), transparent 55%),
		radial-gradient(ellipse 50% 40% at 15% 80%, rgba(130, 90, 200, 0.06), transparent 50%),
		#0a0c12;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.portfolio-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 35%);
	pointer-events: none;
}

/*
 * Custom HTML is often inside a constrained inner wrapper (~content width).
 * Full-bleed so particles span the whole hero (text + gap + portrait).
 */
.portfolio-hero .wp-block-html {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	max-width: none;
	z-index: 0;
	margin: 0;
	padding: 0;
	border: 0;
	pointer-events: none;
	overflow: visible;
	box-sizing: border-box;
}

.portfolio-hero .portfolio-hero__columns {
	position: relative;
	z-index: 1;
}

/* Ambient “falling light” — fixed strip width (aligns ~with text column) */
.portfolio-hero .portfolio-hero__particles {
	position: absolute;
	left: 0;
	right: auto;
	top: 0;
	bottom: 0;
	width: 46%;
	max-width: none;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.55) 52%, transparent 82%);
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.55) 52%, transparent 82%);
}

.portfolio-hero__spark {
	position: absolute;
	top: -5%;
	left: var(--spark-left, 20%);
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: rgba(240, 245, 255, 1);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.45),
		0 0 14px 5px rgba(130, 165, 255, 0.55);
	opacity: 0;
}

.portfolio-hero__spark:nth-child(3n) {
	width: 4px;
	height: 4px;
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.35),
		0 0 18px 6px rgba(110, 150, 255, 0.5);
}

@media (prefers-reduced-motion: no-preference) {
	.portfolio-hero__spark {
		animation: portfolio-hero-spark-fall linear infinite;
		animation-duration: var(--spark-duration, 9s);
		animation-delay: var(--spark-delay, 0s);
	}
}

/* Origins spread inside the left particle strip only */
.portfolio-hero__spark:nth-child(1) {
	--spark-left: 6%;
	--spark-duration: 9.2s;
	--spark-delay: 0s;
}
.portfolio-hero__spark:nth-child(2) {
	--spark-left: 14%;
	--spark-duration: 11s;
	--spark-delay: 1.1s;
}
.portfolio-hero__spark:nth-child(3) {
	--spark-left: 22%;
	--spark-duration: 8s;
	--spark-delay: 2.4s;
}
.portfolio-hero__spark:nth-child(4) {
	--spark-left: 30%;
	--spark-duration: 10.5s;
	--spark-delay: 0.4s;
}
.portfolio-hero__spark:nth-child(5) {
	--spark-left: 38%;
	--spark-duration: 12s;
	--spark-delay: 3.2s;
}
.portfolio-hero__spark:nth-child(6) {
	--spark-left: 46%;
	--spark-duration: 9s;
	--spark-delay: 1.8s;
}
.portfolio-hero__spark:nth-child(7) {
	--spark-left: 54%;
	--spark-duration: 10.8s;
	--spark-delay: 4.5s;
}
.portfolio-hero__spark:nth-child(8) {
	--spark-left: 62%;
	--spark-duration: 8.6s;
	--spark-delay: 2.9s;
}
.portfolio-hero__spark:nth-child(9) {
	--spark-left: 70%;
	--spark-duration: 11.4s;
	--spark-delay: 0.8s;
}
.portfolio-hero__spark:nth-child(10) {
	--spark-left: 78%;
	--spark-duration: 9.6s;
	--spark-delay: 5.1s;
}
.portfolio-hero__spark:nth-child(11) {
	--spark-left: 88%;
	--spark-duration: 10.2s;
	--spark-delay: 3.7s;
}
.portfolio-hero__spark:nth-child(12) {
	--spark-left: 18%;
	--spark-duration: 12.5s;
	--spark-delay: 6s;
}
.portfolio-hero__spark:nth-child(13) {
	--spark-left: 42%;
	--spark-duration: 8.2s;
	--spark-delay: 4.1s;
}
.portfolio-hero__spark:nth-child(14) {
	--spark-left: 94%;
	--spark-duration: 11s;
	--spark-delay: 1.2s;
}

/*
 * Diagonal fall stays in the left band: small net translateX (was 18vw, which pulled sparks to center).
 */
@keyframes portfolio-hero-spark-fall {
	0% {
		transform: translate(-12vw, -18vh);
		opacity: 0;
	}
	7% {
		opacity: 1;
	}
	20% {
		opacity: 0.55;
	}
	45% {
		opacity: 0.95;
	}
	70% {
		opacity: 0.45;
	}
	100% {
		transform: translate(10vw, 88vh);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.portfolio-hero .portfolio-hero__particles {
		display: none;
	}
}

.portfolio-hero .portfolio-hero__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(1.05rem, 2.6vw, 1.4rem);
	max-width: 36rem;
}

.portfolio-hero .portfolio-hero__badge {
	display: inline-block;
	margin: 0;
	padding: 0.4rem 0.95rem;
	width: auto;
	font-family: "Fira Code", ui-monospace, monospace;
	font-size: 0.75rem !important;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(200, 215, 255, 0.95);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	box-shadow:
		0 0 0 1px rgba(120, 160, 255, 0.08) inset,
		0 4px 20px rgba(0, 0, 0, 0.2);
}

@media (prefers-reduced-motion: no-preference) {
	.portfolio-hero .portfolio-hero__intro {
		animation: portfolio-hero-fade-in 0.85s ease-out both;
	}

	.portfolio-hero .portfolio-hero__visual {
		animation: portfolio-hero-fade-in 0.95s ease-out 0.12s both;
	}
}

@keyframes portfolio-hero-fade-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.portfolio-hero .portfolio-hero__title {
	margin: 0;
	color: #f6f8ff;
	text-wrap: balance;
}

.portfolio-hero .portfolio-hero__subtitle {
	margin: 0;
	margin-top: -0.25rem;
	color: rgba(180, 200, 255, 0.92);
	max-width: 28ch;
}

.portfolio-hero .portfolio-hero__desc {
	margin: 0;
	color: rgba(205, 210, 228, 0.88);
	max-width: 38ch;
}

/* CTAs (hero + contact reuse) */
.portfolio-hero .portfolio-hero__actions {
	margin-top: 0.4rem;
}

.portfolio-hero .portfolio-hero__actions .wp-block-button__link,
.portfolio-contact .portfolio-hero__actions .wp-block-button__link {
	border-radius: 0.5rem;
	padding: 0.65rem 1.35rem;
	font-size: 0.9375rem;
	font-weight: 600;
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.portfolio-hero .portfolio-hero__btn--primary .wp-block-button__link,
.portfolio-contact .portfolio-hero__btn--primary .wp-block-button__link {
	background: #f4f6ff;
	color: #0a0c12;
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset,
		0 8px 28px rgba(0, 0, 0, 0.35);
}

.portfolio-hero .portfolio-hero__btn--primary .wp-block-button__link:hover,
.portfolio-hero .portfolio-hero__btn--primary .wp-block-button__link:focus,
.portfolio-contact .portfolio-hero__btn--primary .wp-block-button__link:hover,
.portfolio-contact .portfolio-hero__btn--primary .wp-block-button__link:focus {
	background: #fff;
	color: #050608;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset,
		0 8px 32px rgba(80, 120, 255, 0.2);
	transform: translateY(-1px);
}

.portfolio-hero .portfolio-hero__btn--secondary .wp-block-button__link,
.portfolio-contact .portfolio-hero__btn--secondary .wp-block-button__link {
	background: transparent;
	color: rgba(230, 234, 255, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.22);
}

.portfolio-hero .portfolio-hero__btn--secondary .wp-block-button__link:hover,
.portfolio-hero .portfolio-hero__btn--secondary .wp-block-button__link:focus,
.portfolio-contact .portfolio-hero__btn--secondary .wp-block-button__link:hover,
.portfolio-contact .portfolio-hero__btn--secondary .wp-block-button__link:focus {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.35);
	color: #fff;
	box-shadow: 0 0 24px rgba(120, 160, 255, 0.12);
	transform: translateY(-1px);
}

.portfolio-hero .portfolio-hero__actions .wp-block-button__link:focus-visible,
.portfolio-contact .portfolio-hero__actions .wp-block-button__link:focus-visible {
	outline: 2px solid rgba(160, 190, 255, 0.85);
	outline-offset: 3px;
}

/* Right column: glow + portrait placeholder */
.portfolio-hero .portfolio-hero__col-visual {
	align-self: end;
}

.portfolio-hero .portfolio-hero__visual {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	min-height: 0;
	padding: 0;
}

.portfolio-hero .portfolio-hero__visual::before {
	content: "";
	position: absolute;
	inset: 8% 10% 0 10%;
	border-radius: 50%;
	background: radial-gradient(
		ellipse 70% 55% at 50% 60%,
		rgba(120, 150, 255, 0.22),
		rgba(90, 110, 220, 0.08) 45%,
		transparent 70%
	);
	filter: blur(2px);
	pointer-events: none;
	z-index: 0;
}

.portfolio-hero .portfolio-hero__visual::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 55% 70% at 50% 100%, rgba(80, 130, 255, 0.12), transparent 50%);
	pointer-events: none;
	z-index: 0;
}

.portfolio-hero .portfolio-hero__portrait {
	position: relative;
	z-index: 1;
	margin: 0;
	max-width: 100%;
}

.portfolio-hero .portfolio-hero__portrait img {
	display: block;
	width: 100%;
	height: auto;
	max-height: min(78vh, 820px);
	object-fit: contain;
	object-position: bottom center;
	filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.25));
}

@media (max-width: 1200px) {
	.portfolio-hero {
		padding-left: clamp(1.25rem, 8vw, 180px) !important;
		padding-right: clamp(1.25rem, 8vw, 180px) !important;
	}
}

@media (max-width: 781px) {
	.portfolio-hero {
		min-height: auto;
		padding-bottom: 0 !important;
	}

	/* Hide hero portrait on small screens */
	.portfolio-hero .portfolio-hero__col-visual {
		display: none !important;
	}

	.portfolio-hero .portfolio-hero__columns > .wp-block-column:first-child {
		flex-basis: 100% !important;
	}

	.portfolio-hero .portfolio-hero__visual {
		min-height: 0;
		padding-top: 0;
	}

	.portfolio-hero .portfolio-hero__title {
		font-size: clamp(2rem, 6.5vw, 2.75rem) !important;
	}

	.portfolio-hero .portfolio-hero__particles {
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
   About
   ------------------------------------------------------------------------- */
.portfolio-about {
	position: relative;
	padding-top: 80px !important;
	padding-bottom: 80px !important;
	padding-left: 180px !important;
	padding-right: 180px !important;
	background: #0a0c12;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.portfolio-about .portfolio-about__title {
	margin: 0 0 1rem;
	color: #f4f7ff;
}

.portfolio-about .portfolio-about__text {
	margin: 0;
	color: rgba(210, 215, 230, 0.9);
	max-width: 38ch;
}

.portfolio-about .portfolio-about__edu-heading {
	margin: 0 0 1.25rem;
	color: #e8eaf2;
}

.portfolio-about .portfolio-about__education {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.portfolio-about .portfolio-about__edu-item {
	margin: 0;
	padding: 1rem 1rem 1rem 1.1rem;
	border-left: 2px solid rgba(130, 160, 255, 0.45);
	border-radius: 0 10px 10px 0;
	background: rgba(255, 255, 255, 0.03);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.portfolio-about .portfolio-about__edu-title {
	margin: 0 0 0.35rem;
	color: #f0f2fa;
	font-size: 1rem;
	line-height: 1.35;
}

.portfolio-about .portfolio-about__edu-institution {
	margin: 0;
	color: rgba(195, 202, 225, 0.9);
	line-height: 1.45;
}

.portfolio-about .portfolio-about__edu-sep {
	margin: 0 0.35em;
	color: rgba(160, 175, 210, 0.55);
	font-weight: 400;
}

.portfolio-about .portfolio-about__edu-meta {
	margin: 0;
	color: rgba(150, 165, 195, 0.85);
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 1200px) {
	.portfolio-about {
		padding-left: clamp(1.25rem, 8vw, 180px) !important;
		padding-right: clamp(1.25rem, 8vw, 180px) !important;
	}
}

@media (max-width: 781px) {
	.portfolio-about {
		padding-top: 3rem !important;
		padding-bottom: 3rem !important;
	}
}

/* -------------------------------------------------------------------------
   Experience — minimal vertical timeline
   ------------------------------------------------------------------------- */
.portfolio-experience {
	position: relative;
	padding-top: 80px !important;
	padding-bottom: 80px !important;
	padding-left: 180px !important;
	padding-right: 180px !important;
	background: #0a0c12;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.portfolio-experience .portfolio-experience__heading {
	margin: 0 0 2.25rem;
	color: #f4f7ff;
}

/* Timeline track: thin line + content to the right */
.portfolio-experience .portfolio-experience__list {
	position: relative;
	max-width: 44rem;
	margin-left: 0;
	padding-left: 1.75rem;
	border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.portfolio-experience .portfolio-experience__item {
	position: relative;
	margin: 0;
	padding: 0 0 3.25rem;
	border: none;
	background: transparent;
	box-shadow: none;
}

.portfolio-experience .portfolio-experience__item:last-child {
	padding-bottom: 0;
}

/* Dot centered on timeline border */
.portfolio-experience .portfolio-experience__item::before {
	content: "";
	position: absolute;
	left: -1.75rem;
	top: 0.4rem;
	width: 9px;
	height: 9px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, rgba(210, 220, 255, 0.98), rgba(110, 145, 230, 0.75));
	box-shadow:
		0 0 0 3px #0a0c12,
		0 0 16px rgba(120, 160, 255, 0.25);
	pointer-events: none;
	z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.portfolio-experience .portfolio-experience__item {
		animation: portfolio-hero-fade-in 0.75s ease-out both;
	}

	.portfolio-experience .portfolio-experience__item:nth-child(2) {
		animation-delay: 0.12s;
	}
}

.portfolio-experience .portfolio-experience__role {
	margin: 0 0 0.35rem;
	padding: 0.15rem 0.35rem 0;
	margin-left: -0.35rem;
	color: #f2f4fc;
	font-size: 1.125rem;
	font-weight: 650;
	line-height: 1.35;
	letter-spacing: -0.02em;
}

.portfolio-experience .portfolio-experience__meta {
	margin: 0 0 1rem;
	padding: 0 0.35rem;
	margin-left: -0.35rem;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: rgba(145, 160, 195, 0.82);
	letter-spacing: 0.02em;
}

.portfolio-experience .portfolio-experience__duties {
	margin: 0;
	padding-left: 1.2rem;
	color: rgba(200, 205, 222, 0.9);
	line-height: 1.7;
	list-style-type: disc;
}

.portfolio-experience .portfolio-experience__duties li {
	margin-bottom: 0.55rem;
	padding-left: 0.2rem;
}

.portfolio-experience .portfolio-experience__duties li:last-child {
	margin-bottom: 0;
}

.portfolio-experience .portfolio-experience__duties li::marker {
	color: rgba(130, 155, 210, 0.45);
}

@media (max-width: 1200px) {
	.portfolio-experience {
		padding-left: clamp(1.25rem, 8vw, 180px) !important;
		padding-right: clamp(1.25rem, 8vw, 180px) !important;
	}
}

@media (max-width: 781px) {
	.portfolio-experience {
		padding-top: 3rem !important;
		padding-bottom: 3rem !important;
	}

	.portfolio-experience .portfolio-experience__list {
		padding-left: 1.35rem;
	}

	.portfolio-experience .portfolio-experience__item::before {
		left: -1.35rem;
	}

	.portfolio-experience .portfolio-experience__item {
		padding-bottom: 2.75rem;
	}
}

/* -------------------------------------------------------------------------
   Projects — Selected Work grid
   ------------------------------------------------------------------------- */
.portfolio-projects {
	position: relative;
	padding-top: 80px !important;
	padding-bottom: 80px !important;
	padding-left: 180px !important;
	padding-right: 180px !important;
	background: #0a0c12;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.portfolio-projects .portfolio-projects__wide {
	width: 100%;
}

.portfolio-projects .portfolio-projects__heading {
	margin: 0 0 0.75rem;
	color: #f4f7ff;
	text-align: left;
}

.portfolio-projects .portfolio-projects__intro {
	margin: 0 0 1.85rem;
	max-width: 48ch;
	color: rgba(198, 206, 225, 0.82);
	text-align: left;
}

.portfolio-projects .portfolio-projects__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.75rem;
	width: 100%;
	max-width: 1120px;
	margin-left: auto;
	margin-right: auto;
}

.portfolio-project-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.02);
	box-shadow: 0 8px 48px rgba(0, 0, 0, 0.28);
	opacity: 1;
	transform: none;
	transition:
		opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

html.portfolio-projects-js .portfolio-project-card:not(.is-inview) {
	opacity: 0;
	transform: translateY(18px);
}

html.portfolio-projects-js .portfolio-project-card.is-inview {
	opacity: 1;
	transform: translateY(0);
}

.portfolio-project-card:nth-child(1) {
	transition-delay: 0s;
}
.portfolio-project-card:nth-child(2) {
	transition-delay: 0.06s;
}
.portfolio-project-card:nth-child(3) {
	transition-delay: 0.12s;
}
.portfolio-project-card:nth-child(4) {
	transition-delay: 0.18s;
}
.portfolio-project-card:nth-child(5) {
	transition-delay: 0.24s;
}

@media (prefers-reduced-motion: reduce) {
	.portfolio-project-card {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.portfolio-project-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #12151c;
}

.portfolio-project-card__figure {
	margin: 0;
	height: 100%;
}

.portfolio-project-card__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1);
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: no-preference) {
	.portfolio-project-card:hover .portfolio-project-card__figure img {
		transform: scale(1.06);
	}
}

.portfolio-project-card__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.52);
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
	z-index: 1;
}

.portfolio-project-card:hover .portfolio-project-card__overlay {
	opacity: 1;
}

.portfolio-project-card__cta {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 2;
	padding: 0.55rem 1.35rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: #f4f6ff;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	backdrop-filter: blur(8px);
	opacity: 0;
	transform: translate(-50%, calc(-50% + 10px));
	transition:
		opacity 0.4s ease,
		transform 0.4s ease,
		background 0.2s ease,
		border-color 0.2s ease;
}

.portfolio-project-card:hover .portfolio-project-card__cta {
	opacity: 1;
	transform: translate(-50%, -50%);
}

.portfolio-project-card__cta:hover,
.portfolio-project-card__cta:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
}

.portfolio-project-card__title {
	margin: 1.15rem 1.35rem 0.4rem;
	font-size: 1.125rem;
	font-weight: 650;
	letter-spacing: -0.02em;
	line-height: 1.3;
	color: #f0f2fa;
}

.portfolio-project-card__desc {
	margin: 0 1.35rem 0.45rem;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: rgba(200, 205, 222, 0.9);
}

.portfolio-project-card__stack {
	margin: 0 1.35rem 1.35rem;
	font-family: "Fira Code", ui-monospace, monospace;
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	line-height: 1.45;
	color: rgba(145, 160, 195, 0.78);
}

@media (max-width: 1200px) {
	.portfolio-projects {
		padding-left: clamp(1.25rem, 8vw, 180px) !important;
		padding-right: clamp(1.25rem, 8vw, 180px) !important;
	}
}

@media (max-width: 781px) {
	.portfolio-projects {
		padding-top: 3rem !important;
		padding-bottom: 3rem !important;
	}

	.portfolio-projects .portfolio-projects__grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

/* -------------------------------------------------------------------------
   Tools & Technologies
   ------------------------------------------------------------------------- */
.portfolio-tools {
	position: relative;
	padding-top: 80px !important;
	padding-bottom: 80px !important;
	padding-left: 180px !important;
	padding-right: 180px !important;
	background: #0a0c12;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.portfolio-tools .portfolio-tools__wide {
	width: 100%;
}

.portfolio-tools .portfolio-tools__heading {
	margin: 0 0 2.25rem;
	color: #f4f7ff;
	text-align: left;
}

.portfolio-tools__sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
}

.portfolio-tools__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 2.5rem 2rem;
	align-items: start;
	width: 100%;
	max-width: 1120px;
	margin-left: auto;
	margin-right: auto;
}

.portfolio-tools__category-title {
	margin: 0 0 1.1rem;
	font-size: 1rem;
	font-weight: 650;
	letter-spacing: -0.02em;
	line-height: 1.3;
	color: rgba(210, 218, 240, 0.95);
}

.portfolio-tools__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.portfolio-tools__item {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.5rem 0.65rem;
	margin: 0;
	border-radius: 10px;
	color: rgba(220, 225, 240, 0.92);
	font-size: 0.9375rem;
	line-height: 1.4;
	letter-spacing: -0.01em;
	transition:
		transform 0.22s ease,
		box-shadow 0.22s ease,
		background 0.22s ease;
}

.portfolio-tools__item:hover {
	transform: translateY(-2px) scale(1.015);
	background: rgba(255, 255, 255, 0.04);
	box-shadow:
		0 0 0 1px rgba(130, 160, 255, 0.14),
		0 10px 32px rgba(0, 0, 0, 0.28);
}

.portfolio-tools__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.04);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
	color: rgba(175, 195, 245, 0.92);
	transition: background 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
}

.portfolio-tools__item:hover .portfolio-tools__icon {
	background: rgba(130, 160, 255, 0.1);
	box-shadow:
		0 0 0 1px rgba(130, 160, 255, 0.2) inset,
		0 0 20px rgba(100, 140, 255, 0.12);
	color: rgba(210, 220, 255, 0.98);
}

.portfolio-tools__icon-svg {
	display: block;
	width: 1.125rem;
	height: 1.125rem;
}

.portfolio-tools__label {
	flex: 1;
	min-width: 0;
}

html.portfolio-tools-js .portfolio-tools__category:not(.is-inview) {
	opacity: 0;
	transform: translateY(14px);
}

html.portfolio-tools-js .portfolio-tools__category.is-inview {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

html.portfolio-tools-js .portfolio-tools__category.is-inview:nth-child(1) {
	transition-delay: 0s;
}

html.portfolio-tools-js .portfolio-tools__category.is-inview:nth-child(2) {
	transition-delay: 0.07s;
}

html.portfolio-tools-js .portfolio-tools__category.is-inview:nth-child(3) {
	transition-delay: 0.14s;
}

@media (prefers-reduced-motion: reduce) {
	.portfolio-tools__item {
		transition: none;
	}

	.portfolio-tools__item:hover {
		transform: none;
	}

	html.portfolio-tools-js .portfolio-tools__category:not(.is-inview),
	html.portfolio-tools-js .portfolio-tools__category.is-inview {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

@media (max-width: 1200px) {
	.portfolio-tools {
		padding-left: clamp(1.25rem, 8vw, 180px) !important;
		padding-right: clamp(1.25rem, 8vw, 180px) !important;
	}
}

@media (max-width: 781px) {
	.portfolio-tools {
		padding-top: 3rem !important;
		padding-bottom: 3rem !important;
	}

	.portfolio-tools .portfolio-tools__heading {
		margin-bottom: 1.75rem;
	}

	.portfolio-tools__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

/* -------------------------------------------------------------------------
   Awards — image cards
   ------------------------------------------------------------------------- */
.portfolio-awards {
	position: relative;
	padding-top: 80px !important;
	padding-bottom: 80px !important;
	padding-left: 180px !important;
	padding-right: 180px !important;
	background: #0a0c12;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.portfolio-awards .portfolio-awards__wide {
	width: 100%;
}

.portfolio-awards .portfolio-awards__heading {
	margin: 0 0 2.25rem;
	color: #f4f7ff;
	text-align: left;
}

.portfolio-awards__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 1.75rem;
	width: 100%;
	max-width: 1120px;
	margin-left: auto;
	margin-right: auto;
}

.portfolio-award-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	background: rgba(255, 255, 255, 0.02);
	box-shadow:
		0 4px 24px rgba(0, 0, 0, 0.35),
		0 0 0 1px rgba(255, 255, 255, 0.03) inset;
	transition:
		box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.45s ease,
		transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-award-card:hover {
	border-color: rgba(130, 160, 255, 0.22);
	box-shadow:
		0 12px 48px rgba(0, 0, 0, 0.45),
		0 0 0 1px rgba(130, 160, 255, 0.12) inset,
		0 0 40px rgba(100, 140, 255, 0.08);
	transform: translateY(-3px);
}

.portfolio-award-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #12151c;
}

.portfolio-award-card__figure {
	margin: 0;
	height: 100%;
}

.portfolio-award-card__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transform: scale(1);
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-award-card:hover .portfolio-award-card__figure img {
	transform: scale(1.06);
}

.portfolio-award-card__overlay-base {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgba(5, 8, 14, 0.12) 0%,
		rgba(5, 8, 14, 0.38) 55%,
		rgba(5, 8, 14, 0.62) 100%
	);
	transition: opacity 0.45s ease;
}

.portfolio-award-card__overlay-hover {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	opacity: 0;
	background: radial-gradient(
		ellipse 120% 80% at 50% 0%,
		rgba(130, 160, 255, 0.14) 0%,
		transparent 55%
	),
		rgba(0, 0, 0, 0.22);
	transition: opacity 0.45s ease;
}

.portfolio-award-card:hover .portfolio-award-card__overlay-hover {
	opacity: 1;
}

.portfolio-award-card:hover .portfolio-award-card__overlay-base {
	opacity: 0.92;
}

.portfolio-award-card__body {
	padding: 1.25rem 1.35rem 1.4rem;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	background: linear-gradient(180deg, rgba(14, 16, 22, 0.98) 0%, rgba(10, 12, 18, 1) 100%);
}

.portfolio-award-card__title {
	margin: 0 0 0.35rem;
	font-size: 1.0625rem;
	font-weight: 650;
	letter-spacing: -0.02em;
	line-height: 1.3;
	color: #f0f2fa;
}

.portfolio-award-card__date {
	margin: 0 0 0.5rem;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(145, 160, 195, 0.85);
}

.portfolio-award-card__context {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: rgba(165, 178, 210, 0.72);
}

html.portfolio-awards-js .portfolio-award-card:not(.is-inview) {
	opacity: 0;
	transform: translateY(18px);
}

html.portfolio-awards-js .portfolio-award-card.is-inview {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

html.portfolio-awards-js .portfolio-award-card.is-inview:nth-child(1) {
	transition-delay: 0s;
}

html.portfolio-awards-js .portfolio-award-card.is-inview:nth-child(2) {
	transition-delay: 0.08s;
}

html.portfolio-awards-js .portfolio-award-card.is-inview:nth-child(3) {
	transition-delay: 0.16s;
}

@media (prefers-reduced-motion: reduce) {
	.portfolio-award-card,
	.portfolio-award-card:hover {
		transition: none;
		transform: none;
	}

	.portfolio-award-card:hover .portfolio-award-card__figure img {
		transform: none;
	}

	html.portfolio-awards-js .portfolio-award-card:not(.is-inview),
	html.portfolio-awards-js .portfolio-award-card.is-inview {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

@media (max-width: 1200px) {
	.portfolio-awards {
		padding-left: clamp(1.25rem, 8vw, 180px) !important;
		padding-right: clamp(1.25rem, 8vw, 180px) !important;
	}
}

@media (max-width: 781px) {
	.portfolio-awards {
		padding-top: 3rem !important;
		padding-bottom: 3rem !important;
	}

	.portfolio-awards .portfolio-awards__heading {
		margin-bottom: 1.75rem;
	}

	.portfolio-awards__grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

/* -------------------------------------------------------------------------
   Contact
   ------------------------------------------------------------------------- */
.portfolio-contact {
	position: relative;
	padding-top: 80px !important;
	padding-bottom: 100px !important;
	padding-left: 180px !important;
	padding-right: 180px !important;
	background: #0a0c12;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.portfolio-contact .portfolio-contact__inner {
	max-width: 36rem;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.portfolio-contact .portfolio-contact__heading {
	margin: 0 0 1rem;
	color: #f4f7ff;
}

.portfolio-contact .portfolio-contact__intro {
	margin: 0 auto 2rem;
	max-width: 40ch;
	color: rgba(205, 210, 228, 0.9);
}

.portfolio-contact .portfolio-contact__buttons {
	margin-top: 0;
	margin-bottom: 2.5rem;
	justify-content: center;
}

.portfolio-contact__form {
	position: relative;
	margin: 0;
	padding: 1.75rem 1.5rem 1.5rem;
	text-align: left;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.02);
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.28);
}

.portfolio-contact__form-title {
	margin: 0 0 1.25rem;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: rgba(220, 225, 240, 0.95);
	text-align: center;
}

.portfolio-contact__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.portfolio-contact__status {
	margin: 0 0 1rem;
	padding: 0.65rem 0.85rem;
	font-size: 0.875rem;
	line-height: 1.45;
	text-align: center;
	border-radius: 8px;
}

.portfolio-contact__status--success {
	color: rgba(200, 235, 210, 0.95);
	background: rgba(40, 120, 80, 0.2);
	border: 1px solid rgba(80, 180, 120, 0.35);
}

.portfolio-contact__status--error {
	color: rgba(255, 210, 210, 0.95);
	background: rgba(160, 50, 50, 0.15);
	border: 1px solid rgba(220, 100, 100, 0.35);
}

.portfolio-contact__field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: 1rem;
}

.portfolio-contact__label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(145, 160, 195, 0.88);
}

.portfolio-contact__field input,
.portfolio-contact__field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.65rem 0.85rem;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: #f0f2fa;
	background: rgba(8, 10, 16, 0.65);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.portfolio-contact__field textarea {
	min-height: 6.5rem;
	resize: vertical;
}

.portfolio-contact__field input::placeholder,
.portfolio-contact__field textarea::placeholder {
	color: rgba(130, 145, 175, 0.55);
}

.portfolio-contact__field input:hover,
.portfolio-contact__field textarea:hover {
	border-color: rgba(255, 255, 255, 0.16);
}

.portfolio-contact__field input:focus,
.portfolio-contact__field textarea:focus {
	outline: none;
	border-color: rgba(130, 160, 255, 0.45);
	box-shadow: 0 0 0 3px rgba(100, 140, 255, 0.12);
}

.portfolio-contact__submit {
	display: block;
	width: 100%;
	margin-top: 0.25rem;
	padding: 0.65rem 1.35rem;
	font-size: 0.9375rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	border-radius: 0.5rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: #f4f6ff;
	color: #0a0c12;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset,
		0 8px 28px rgba(0, 0, 0, 0.35);
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.portfolio-contact__submit:hover,
.portfolio-contact__submit:focus {
	background: #fff;
	color: #050608;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset,
		0 8px 32px rgba(80, 120, 255, 0.2);
	transform: translateY(-1px);
}

.portfolio-contact__submit:focus-visible {
	outline: 2px solid rgba(160, 190, 255, 0.85);
	outline-offset: 3px;
}

.portfolio-contact__form-footer {
	margin: 1rem 0 0;
	text-align: center;
}

.portfolio-contact__form-linkedin {
	font-size: 0.875rem;
	font-weight: 500;
	color: rgba(130, 180, 255, 0.92);
	text-decoration: none;
	transition: color 0.2s ease, text-shadow 0.2s ease;
}

.portfolio-contact__form-linkedin:hover,
.portfolio-contact__form-linkedin:focus {
	color: #a8c8ff;
	text-shadow: 0 0 16px rgba(10, 102, 194, 0.25);
}

.portfolio-contact__form-linkedin:focus-visible {
	outline: 2px solid rgba(160, 190, 255, 0.85);
	outline-offset: 3px;
	border-radius: 4px;
}

@media (max-width: 1200px) {
	.portfolio-contact {
		padding-left: clamp(1.25rem, 8vw, 180px) !important;
		padding-right: clamp(1.25rem, 8vw, 180px) !important;
	}
}

@media (max-width: 781px) {
	.portfolio-contact {
		padding-top: 3rem !important;
		padding-bottom: 3.5rem !important;
	}

	.portfolio-contact .portfolio-contact__intro {
		margin-bottom: 1.75rem;
	}

	.portfolio-contact .portfolio-contact__buttons {
		margin-bottom: 2rem;
	}

	.portfolio-contact__form {
		padding: 1.35rem 1.15rem 1.25rem;
	}
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.portfolio-footer {
	margin-top: 0 !important;
	padding-top: 2.75rem !important;
	padding-bottom: 2.75rem !important;
	padding-left: 180px !important;
	padding-right: 180px !important;
	background: #0a0c12;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.portfolio-footer__inner {
	max-width: 40rem;
	margin: 0 auto;
	text-align: center;
}

.portfolio-footer__name {
	margin: 0 0 0.35rem;
	font-size: 1rem;
	font-weight: 650;
	letter-spacing: -0.02em;
	color: #e8eaf2;
}

.portfolio-footer__role {
	margin: 0 0 1.25rem;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(145, 160, 195, 0.85);
}

.portfolio-footer__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.35rem 0.5rem;
	margin: 0 0 1.25rem;
	font-size: 0.875rem;
}

.portfolio-footer__link {
	color: rgba(200, 210, 235, 0.88);
	text-decoration: none;
	transition: color 0.2s ease;
}

.portfolio-footer__link:hover,
.portfolio-footer__link:focus {
	color: #fff;
}

.portfolio-footer__sep {
	color: rgba(120, 135, 170, 0.45);
	user-select: none;
}

.portfolio-footer__copy {
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	color: rgba(130, 145, 175, 0.65);
}

@media (max-width: 1200px) {
	.portfolio-footer {
		padding-left: clamp(1.25rem, 8vw, 180px) !important;
		padding-right: clamp(1.25rem, 8vw, 180px) !important;
	}
}

@media (max-width: 781px) {
	.portfolio-footer {
		padding-top: 2rem !important;
		padding-bottom: 2.25rem !important;
	}
}