/* Desktop-only project page nav (case-study pages) */

.page-nav {
	position: fixed;
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	bottom: 1.25rem; /* JS will override on desktop */
	z-index: 120;
	pointer-events: none;
	transition: opacity 300ms ease;
	opacity: 0;
	transition: bottom 260ms ease-out, opacity 200ms ease-out, transform 260ms ease-out;
}

/* Mobile-first main/content layout */
main .content {
	margin-left: 1rem;
	margin-right: 1rem;
}

.micro-text {
	text-align: center;
	background-color: transparent;
	color: var(--color-text);
	padding: 0;
	padding-bottom: .5rem;
	padding-top: 1.5rem;
}

.overview__eyebrow {
	text-align: left;
}



main .content h1 {
	font-family: var(--font-title);
	font-size: clamp(3rem, 6vw, 2.75rem);
	font-weight: 800;
	margin: 0 0 var(--space-xs);
}

/* ── Case study: Overview (mobile-first; two columns on desktop) ── */
.overview {
	.overview__eyebrow {
		padding-top: var(--space-md);
		padding-bottom: 0.35rem;
		margin: 0;
	}

	.overview__shell {
		display: flex;
		flex-direction: column;
		gap: clamp(2.5rem, 9vw, 4.5rem);
		margin-top: 0;
	}

	.overview__lede {
		font-family: var(--font-body);
		line-height: 1.45;
		max-width: 42rem;
	}

	.overview__meta {
		margin: 0;
	}

	.overview__meta-row {
		display: grid;
		grid-template-columns: minmax(4.25rem, 5.75rem) minmax(0, 1fr);
		column-gap: clamp(1rem, 3vw, 2rem);
		row-gap: var(--space-sm);
		align-items: start;
		padding: 0 0 clamp(0.85rem, 2.5vw, 1.5rem) 0;
		/* border-bottom: 1px solid rgba(255, 247, 231, 0.1); */
		overflow: visible;
	}

	.overview__meta-row--team {
		padding-top: 0;
	}

	.overview__meta-row:last-of-type {
		border-bottom: none;
		padding-bottom: 0;
	}

	.overview__meta-label {
		margin: 0;
		font-family: var(--font-mono);
		font-size: clamp(0.65rem, 1.6vw, 0.78rem);
		font-weight: 500;
		text-transform: uppercase;
		color: rgba(255, 247, 231, 0.48);
		line-height: 1.2;
		padding-top: 0;
	}

	/* <h3 class="micro-text"> in a dt: match label column, drop global micro-text padding */
	.overview__meta-label .overview__meta-heading.micro-text {
		margin: 0;
		padding: 0;
		padding-top: 0;
		text-align: left;
		font-family: var(--font-mono);
		font-size: clamp(0.65rem, 1.6vw, 0.78rem);
		font-weight: 500;
		text-transform: uppercase;
		color: rgba(255, 247, 231, 0.48);
		line-height: 1.2;
	}

	.overview__meta-value {
		margin: 0;
		min-width: 0;
		overflow: visible;
	}

	/* Context row: same value cell as Team + thesis copy beside avatar strip */
	.overview__context {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: clamp(0.65rem, 2vw, 1rem);
	}

	.overview__context-text {
		margin: 0;
		flex: 1;
		min-width: min(100%, 11rem);
		font-family: var(--font-body);
		font-size: clamp(0.95rem, 2.2vw, 1.05rem);
		line-height: 1.45;
		font-weight: 400;
		color: rgba(255, 247, 231, 0.82);
	}

	.overview__context-text a {
		color: inherit;
		text-decoration: underline;
		text-underline-offset: 0.15em;
	}

	.overview__context-text a:hover {
		color: rgba(255, 247, 231, 0.95);
	}


	.overview__team {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.4rem;
	}

	.overview__team li {
		overflow: visible;
	}

	/* Avatar + hover/focus pill tooltip (ref: name above circle) */
	.overview__avatar-wrap {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		border-radius: var(--radius, 30px);
		outline: none;
	}

	.overview__avatar-wrap:focus-visible {
		outline: 2px solid rgba(255, 247, 231, 0.55);
		outline-offset: 3px;
	}

	.overview__avatar-tip {
		position: absolute;
		bottom: calc(100% + 0.4rem);
		left: 50%;
		z-index: 40;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.15em;
		padding: 1rem;
		max-width: min(14rem, 70vw);
		text-align: center;
		font-family: var(--font-body);
		font-size: clamp(0.7rem, 1.65vw, 0.82rem);
		font-weight: 500;
		line-height: 1.25;
		color: var(--color-text);
		background: #0a0a0a;
		border-radius: var(--radius, 30px);
		box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.35);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateX(-50%) translateY(0.25rem);
		transition:
			opacity 0.15s ease,
			transform 0.15s ease,
			visibility 0s linear 0.15s;
	}

	.overview__avatar-tip__name {
		font-weight: 600;
	}

	.overview__avatar-tip__detail {
		font-size: 0.88em;
		font-weight: 400;
		opacity: 0.88;
		line-height: 1.2;
	}

	/* Tooltip hover/focus rules live at root level (see end of file) so nested @media
	   interop is reliable and (pointer: fine) does not block hybrid laptops. */

	.overview__avatar {
		display: block;
		width: 2.5rem;
		height: 2.5rem;
		border-radius: var(--radius, 30px);
		background: rgba(255, 247, 231, 0.14);
		border: 1px solid rgba(255, 247, 231, 0.22);
		flex-shrink: 0;
		overflow: hidden;
	}

	.overview__avatar img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: var(--radius, 30px);
		display: block;
	}

	/* Avatar is sometimes the <img> itself (e.g. .overview__avatar_Zarah) */
	img.overview__avatar {
		object-fit: cover;
	}

	/* Tool logo variant */
	.overview__avatar--tool {
		background: #fff;
	}

	.overview__avatar--tool img {
		object-fit: cover;
	}

	.overview__avatar--more {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-family: var(--font-body);
		font-size: clamp(0.7rem, 1.8vw, 0.8rem);
		font-weight: 500;
		color: rgba(255, 247, 231, 0.78);
		background: rgba(255, 247, 231, 0.08);
	}

	.overview__pills {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.overview__pill {
		display: inline-block;
		padding: 0.45em 0.95em;
		font-family: var(--font-mono);
		font-size: clamp(0.65rem, 1.7vw, 0.75rem);
		font-weight: 500;
		text-transform: uppercase;
		line-height: 1.2;
		color: rgba(255, 247, 231, 0.9);
		border: 1px solid rgba(255, 247, 231, 0.35);
		border-radius: var(--radius, 30px);
		background: transparent;
	}

	.overview__date {
		font-family: var(--font-body);
		font-weight: 400;
		color: rgba(255, 247, 231, 0.88);
	}

	.overview__details {
		margin-top: clamp(2.75rem, 8vw, 4.5rem);

		p,
		li {
			font-family: var(--font-body);
			font-size: clamp(1rem, 2.5vw, 1.1rem);
			line-height: 1.5;
			color: rgba(255, 247, 231, 0.82);
		}

		ul {
			list-style: disc;
			padding-left: 1.25rem;
			margin: 0 0 var(--space-lg);
		}

		a {
			color: inherit;
			text-decoration: underline;
			text-underline-offset: 0.15em;
		}
	}
}

@media (width > 768px) {
	.overview {
		.overview__shell {
			display: grid;
			grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.78fr);
			align-items: start;
			column-gap: clamp(2rem, 5vw, 3.75rem);
			row-gap: var(--space-xl);
		}

		.overview__intro {
			min-width: 0;
		}

		.overview__meta {
			min-width: 0;
		}
	}

	.page-nav {
		position: sticky;
		top: 50vh;
		left: var(--space-md);
		transform: translateY(-50%);
		opacity: 1;
		/* Full-width nav + z-index was intercepting hovers over the overview column (Mirae, etc.). */
		width: fit-content;
		max-width: min(18rem, calc(100vw - (2 * var(--space-md))));
		pointer-events: none;
		margin-left: var(--space-md);
	}

	.page-nav ul {
		pointer-events: auto;
		list-style: none;
		margin: 0;
		padding: var(--space-xs) var(--space-md);
		border-radius: var(--radius, 30px);
		display: inline-flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 0.75rem;
		background: transparent;
		color: var(--color-text);
		max-width: min(18rem, calc(100vw - (2 * var(--space-md))));
	}

	.page-nav li {
		margin: 0;
	}

	.page-nav a {
		display: inline-flex;
		align-items: center;
		justify-content: flex-start;
		text-align: left;
		text-decoration: none;
		color: inherit;
		white-space: nowrap;
		font-family: var(--font-body);
		font-size: var(--size-text-md);
		font-weight: 500;
		line-height: 1;
		padding: 0.25rem 0.5rem;
		border-radius: var(--radius, 30px);
		opacity: 0.35;
		transition: transform 180ms var(--ease-out), opacity 180ms var(--ease-out);
	}

	.page-nav a:hover,
	.page-nav a.is-active {
		opacity: 1;
	}


	main .content {
		width: 60vw;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ── Mobile floating "back to top" ── */
.float-to-top-wrap {
	position: relative;
	height: 0;
	z-index: 80;
	pointer-events: none;
}

.float-to-top {
	position: fixed;
	right: 1.25rem;
	bottom: 4rem;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: var(--radius, 30px);
	border: 1px solid var(--color-text);
	background-color: var(--color-bg);
	background: transparent;
	color: var(--color-text);
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	display: inline-flex;
	pointer-events: auto;

	opacity: 1;
	transition: bottom 260ms ease-out, opacity 200ms ease-out, transform 260ms ease-out;
	transform: translateY(0);

	/* Rotate the shared arrow icon to point upward */
}

.float-to-top .icon-arrow {
	transform: rotate(-45deg);
	transition: none;
}

.float-to-top:focus-visible {
	outline: 2px solid rgba(255, 247, 231, 0.65);
	outline-offset: 3px;
}

@media (width > 768px) {
	.float-to-top-wrap { display: none; }
}

/* Avatar tooltips: no (hover:hover) gate (hybrid / coarse pointers). Direct child only.
   :focus-visible only — not :focus-within — avoids click-focus sticking the tip open. */
.overview .overview__avatar-wrap:hover > .overview__avatar-tip {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
	transition:
		opacity 0.15s ease,
		transform 0.15s ease,
		visibility 0s;
}

.overview .overview__avatar-wrap:focus-visible > .overview__avatar-tip {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
	transition:
		opacity 0.15s ease,
		transform 0.15s ease,
		visibility 0s;
}

@media (hover: none) {
	.overview .overview__avatar-wrap:active > .overview__avatar-tip {
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%) translateY(0);
		transition:
			opacity 0.1s ease,
			transform 0.1s ease,
			visibility 0s;
	}
}

/* ── Case Study Sections ── */
section {
	margin-top: 10rem;

}
.case-section {
	/* padding: var(--space-3xl) 0; */
}

.case-section__title {
	font-family: var(--font-title);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 800;
	margin: 0 0 var(--space-md);
	line-height: 1.1;
}

.case-section__body {
	font-family: var(--font-body);
	font-size: clamp(1rem, 2.5vw, 1.15rem);
	line-height: 1.6;
	color: rgba(255, 247, 231, 0.72);
	margin: 0 0 var(--space-xl);
}

.case-img {
	width: 100%;
	border-radius: 16px;
	overflow: hidden;
	margin: var(--space-xl) 0;
	background: rgba(255, 247, 231, 0.04);
	border: 1px solid rgba(255, 247, 231, 0.08);
}

.case-img img {
	width: 100%;
	height: auto;
	display: block;
}

.case-img-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-sm);
	margin: var(--space-xl) 0;
}

.case-img-grid img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	display: block;
	border: 1px solid rgba(255, 247, 231, 0.08);
}

.case-cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
	margin: var(--space-xl) 0 0;
}

@media (width > 540px) {
	.case-cols {
		grid-template-columns: repeat(2, 1fr);
	}
	.case-cols--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

.case-col {
	padding: var(--space-md);
	border: 1px solid rgba(255, 247, 231, 0.1);
	border-radius: 16px;
	background: rgba(255, 247, 231, 0.03);
}

.case-col__heading {
	font-family: var(--font-body);
	font-size: clamp(0.95rem, 2vw, 1.05rem);
	font-weight: 700;
	margin: 0 0 0.5rem;
	color: var(--color-text);
}

.case-col p {
	font-family: var(--font-body);
	font-size: clamp(0.88rem, 2vw, 0.98rem);
	line-height: 1.55;
	color: rgba(255, 247, 231, 0.62);
	margin: 0;
}

.case-quote {
	border-left: 2px solid rgba(255, 247, 231, 0.25);
	padding: var(--space-sm) var(--space-md);
	margin: var(--space-xl) 0;
}

.case-quote p {
	font-family: var(--font-body);
	font-size: clamp(1.1rem, 2.5vw, 1.35rem);
	font-style: italic;
	line-height: 1.45;
	color: rgba(255, 247, 231, 0.8);
	margin: 0 0 0.5rem;
}

.case-quote cite {
	font-family: var(--font-mono);
	font-size: clamp(0.72rem, 1.5vw, 0.8rem);
	color: rgba(255, 247, 231, 0.4);
	text-transform: uppercase;
	font-style: normal;
}

/* ── See More section ── */
.see-more {
	width: 100%;
	padding: var(--space-3xl) 0 var(--space-3xl);
}

.see-more .micro-text,
.see-more .case-section__title {
	padding-inline: var(--space-md);
}

@media (width > 768px) {
	.see-more .micro-text,
	.see-more .case-section__title {
		padding-inline: 20vw;
	}
}

.see-more__list {
	list-style: none;
	margin: var(--space-xl) auto;
	padding: var(--space-xl) var(--space-md);
	display: flex;
	justify-content: center;
	gap: var(--space-xl);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.see-more__list::-webkit-scrollbar {
	display: none;
}

.see-more__list .project-card {
	flex: 0 0 clamp(260px, 62vw, 380px);
	scroll-snap-align: start;
	width: auto;
}

/* ── Scroll-driven animations ── */
@supports (animation-timeline: view()) {
	@keyframes fade-up {
		from {
			opacity: 0;
			transform: translateY(2.5rem);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes img-reveal {
		from {
			opacity: 0;
			transform: scale(0.97);
		}
		to {
			opacity: 1;
			transform: scale(1);
		}
	}

	@keyframes fade-in {
		from { opacity: 0; }
		to   { opacity: 1; }
	}

	.case-section {
		animation: fade-up linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 25%;
	}

	.case-img,
	.case-img-grid,
	video {
		animation: img-reveal linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 30%;
	}

	.case-section__title {
		animation: fade-up linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 20%;
	}

	.case-cols > * {
		animation: fade-up linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 25%;
	}

	.case-quote {
		animation: fade-up linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 30%;
	}

	.overview .overview__lede,
	.overview .overview__meta {
		animation: fade-up linear both;
		animation-timeline: view();
		animation-range: entry 5% entry 40%;
	}

	.see-more .project-card {
		animation: fade-up linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 35%;
	}
}

/* Card image bg colours (style.css not loaded on project pages) */
.see-more .project-nura    .project-card__media { background-color: #6db9ee; }
.see-more .project-iris    .project-card__media { background-color: #CA8DD7; }
.see-more .project-google-tasks .project-card__media { background-color: #FABF03; }
.see-more .project-mirae   .project-card__media { background-color: #b4ffd6; }