/*
 * TK Portfolio — tokens taken from Deon (themes/deon/assets/css/main.min.css).
 * Fonts (Syne, Heebo, Archivo) are already loaded by the theme.
 */
/* Deon wraps content in a padded (and sometimes 1300px grid) #qodef-page-inner; the templates handle their own width. */
.tkp-body #qodef-page-inner {
	width: 100% !important;
	max-width: none;
	padding: 0 !important;
}

.tkp {
	--tkp-black: #000;
	--tkp-white: #fff;
	--tkp-muted: #9e9e9e;
	--tkp-line: #e1e1e1;
	--tkp-soft: #fafafa;
	--tkp-blue: #5cc3ee;
	--tkp-indigo: #5e5ef0;
	--tkp-lilac: #ca97d2;
	--tkp-gradient: linear-gradient(45deg, #5cc3ee 0, #5d91ef 29%, #5e5ef0 50%, #947be1 73%, #ca97d2 100%);
	--tkp-gradient-line: linear-gradient(70deg, #57b8e0, #5762e2, #be8ec6);
	--tkp-gradient-overlay: linear-gradient(-120deg, rgba(202, 151, 210, .94), rgba(94, 94, 240, .94) 46%, rgba(92, 195, 238, .94));
	--tkp-font-heading: Syne, sans-serif;
	--tkp-font-body: Heebo, sans-serif;
	--tkp-font-label: Archivo, sans-serif;
	--tkp-grid: 1300px;
	--tkp-gutter: 30px;
	--tkp-ease: cubic-bezier(0, .68, .58, 1);

	display: block;
	font-family: var(--tkp-font-body);
	font-size: 17px;
	line-height: 1.41em;
	color: var(--tkp-black);
	background: var(--tkp-white);
}

.tkp *,
.tkp *::before,
.tkp *::after {
	box-sizing: border-box;
}

.tkp-wrap {
	width: 100%;
	max-width: calc(var(--tkp-grid) + 2 * var(--tkp-gutter));
	margin: 0 auto;
	padding: 0 var(--tkp-gutter);
}

/* ---------- Shared ---------- */

.tkp-label {
	display: inline-block;
	font-family: var(--tkp-font-label);
	font-size: 12px;
	line-height: 1.33em;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--tkp-black);
}

.tkp-label--gradient {
	background: var(--tkp-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 600;
}

.tkp-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 17px 48px 15px 50px;
	font-family: var(--tkp-font-label);
	font-size: 12px;
	line-height: 1.33em;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--tkp-white);
	background: var(--tkp-gradient);
	border: 1px solid;
	border-image-slice: 1;
	border-image-source: var(--tkp-gradient-line);
	transition: color .2s ease-out, background .2s ease-out;
}

.tkp-button:hover,
.tkp-button:focus-visible {
	color: var(--tkp-black);
	background: transparent;
}

.tkp a:focus-visible,
.tkp button:focus-visible {
	outline: 2px solid var(--tkp-indigo);
	outline-offset: 3px;
}

/* ---------- Hero ---------- */

/* Deon pulls the page up by 100px (70px on mobile) under the header. */
.tkp-hero {
	padding: 210px 0 70px;
}

.tkp-hero__title {
	max-width: 14ch;
	margin: 18px 0 0;
	font-family: var(--tkp-font-heading);
	font-weight: 600;
	font-size: clamp(44px, 7vw, 90px);
	line-height: 1.02em;
	color: var(--tkp-black);
}

.tkp-hero__intro {
	max-width: 620px;
	margin-top: 28px;
	font-size: 19px;
	line-height: 1.55em;
	color: #333;
}

.tkp-hero__intro p {
	margin: 0 0 12px;
}

/* ---------- Tags / links ---------- */

.tkp-tag {
	display: inline-flex;
	align-items: center;
	padding: 7px 14px 6px;
	font-family: var(--tkp-font-label);
	font-size: 11px;
	line-height: 1.33em;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--tkp-black);
	border: 1px solid;
	border-image-slice: 1;
	border-image-source: var(--tkp-gradient-line);
}

.tkp-arrow {
	display: inline-block;
	transition: transform .35s var(--tkp-ease);
}

.tkp-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 34px;
	padding-bottom: 6px;
	font-family: var(--tkp-font-label);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--tkp-black);
	text-decoration: none;
	background: var(--tkp-gradient) left bottom / 100% 2px no-repeat;
}

.tkp-link-arrow .tkp-arrow {
	background: var(--tkp-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 16px;
}

.tkp-link-arrow:hover .tkp-arrow,
.tkp-soon:hover .tkp-arrow {
	transform: translate(4px, -4px);
}

/* ---------- Project rows ---------- */

.tkp-projects {
	padding-top: 30px;
	padding-bottom: 20px;
}

.tkp-proj {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: clamp(28px, 5vw, 80px);
	align-items: center;
	margin-bottom: clamp(70px, 9vw, 140px);
	scroll-margin-top: 120px;
}

.tkp-proj--reverse {
	grid-template-columns: .9fr 1.1fr;
}

.tkp-proj--reverse .tkp-proj__media {
	order: 2;
}

.tkp-proj__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 11;
	background: var(--tkp-soft);
}

/* Deon gradient tint on hover when the image links to the live site. */
.tkp-proj__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--tkp-gradient-overlay);
	opacity: 0;
	transition: opacity .5s var(--tkp-ease);
	pointer-events: none;
}

.tkp-proj__media img,
.tkp-proj__video,
.tkp-proj__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .9s var(--tkp-ease);
}

.tkp-proj__placeholder {
	background: var(--tkp-gradient);
	opacity: .2;
}

.tkp-proj:hover .tkp-proj__media img,
.tkp-proj:hover .tkp-proj__video {
	transform: scale(1.04);
}

a.tkp-proj__media:hover::after {
	opacity: .18;
}

.tkp-proj__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
}

.tkp-proj__num {
	font-family: var(--tkp-font-heading);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .1em;
	background: var(--tkp-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.tkp-proj__client {
	font-family: var(--tkp-font-label);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--tkp-muted);
}

.tkp-proj__title {
	margin: 0 0 18px;
	font-family: var(--tkp-font-heading);
	font-size: clamp(32px, 4.4vw, 56px);
	font-weight: 600;
	line-height: 1.08em;
	color: var(--tkp-black);
}

.tkp-proj__desc {
	max-width: 56ch;
	font-size: 18px;
	line-height: 1.6em;
	color: #333;
}

.tkp-proj__desc p {
	margin: 0 0 14px;
}

.tkp-proj__desc > :last-child {
	margin-bottom: 0;
}

.tkp-proj__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.tkp-proj__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 20px clamp(32px, 4vw, 64px);
	margin: 30px 0 0;
	padding-top: 26px;
	border-top: 1px solid var(--tkp-line);
}

.tkp-proj__stats > div {
	display: flex;
	flex-direction: column-reverse;
}

.tkp-stat__num {
	margin: 0;
	font-family: var(--tkp-font-heading);
	font-size: clamp(30px, 3vw, 44px);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: var(--tkp-black);
}

.tkp-stat__label {
	margin-top: 12px;
	font-family: var(--tkp-font-label);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--tkp-muted);
}

.tkp-empty {
	padding: 60px 0;
	color: var(--tkp-muted);
}

/* ---------- "More coming" teaser ---------- */

.tkp-soon-wrap {
	padding-top: 20px;
	padding-bottom: clamp(80px, 11vw, 150px);
}

.tkp-soon {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 4vw, 60px);
	align-items: center;
	padding: clamp(36px, 5vw, 70px);
	overflow: hidden;
	color: #bdbdbd;
	text-decoration: none;
	background: var(--tkp-black);
	transition: transform .5s var(--tkp-ease);
}

/* Gradient hairline along the top edge. */
.tkp-soon::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	background: var(--tkp-gradient);
}

.tkp-soon:hover {
	transform: translateY(-4px);
}

.tkp-soon__title {
	margin: 14px 0 0;
	font-family: var(--tkp-font-heading);
	font-size: clamp(30px, 3.6vw, 50px);
	font-weight: 600;
	line-height: 1.1em;
	color: var(--tkp-white);
}

.tkp-soon__right p {
	max-width: 44ch;
	margin: 0 0 24px;
	font-size: 18px;
	line-height: 1.6em;
	color: #bdbdbd;
}

.tkp-soon:hover .tkp-button {
	color: var(--tkp-white);
	background: transparent;
}

/* ---------- Reveal on scroll (only when JS runs) ---------- */

.tkp-js .tkp-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .9s var(--tkp-ease), transform .9s var(--tkp-ease);
}

.tkp-js .tkp-reveal.is-in {
	opacity: 1;
	transform: none;
}

.tkp-js .tkp-reveal[data-d="1"] {
	transition-delay: .08s;
}

.tkp-js .tkp-reveal[data-d="2"] {
	transition-delay: .16s;
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
	.tkp-hero {
		padding: 150px 0 50px;
	}
}

@media (max-width: 760px) {
	.tkp {
		--tkp-gutter: 16px;
	}

	.tkp-proj,
	.tkp-proj--reverse {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.tkp-proj--reverse .tkp-proj__media {
		order: 0;
	}

	.tkp-proj__desc,
	.tkp-soon__right p {
		font-size: 17px;
	}

	.tkp-soon {
		grid-template-columns: 1fr;
	}

	.tkp-button {
		padding: 15px 32px 13px 34px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tkp *,
	.tkp *::before,
	.tkp *::after {
		transition: none !important;
	}
}