/*
Theme Name: AKXIMEX Case
Description: Minimal article-only theme for AKXIMEX client cases.
Version: 1.3.2
*/

:root {
	--paper: #f7f7f4;
	--ink: #171715;
	--muted: #66665f;
	--line: #d8d8d0;
	--accent: #e8681a;
}

* {
	box-sizing: border-box;
}

html {
	background: var(--paper);
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	line-height: 1.65;
	letter-spacing: 0;
}

.article-shell {
	width: min(100% - 40px, 780px);
	margin: 0 auto;
	padding: 12vh 0 34vh;
	transform: translate3d(0, var(--article-offset, 0), 0);
	filter: brightness(var(--article-brightness, 1));
	transition: filter 80ms linear, transform 80ms linear;
}

.article-content {
	opacity: 0;
	transform: translateY(18px);
	animation: article-enter 700ms ease-out 80ms forwards;
}

.article-intro {
	padding-bottom: 54px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 64px;
}

.article-intro h1 {
	max-width: 760px;
	margin: 0;
	font-size: clamp(42px, 7vw, 72px);
	line-height: 1.02;
	font-weight: 700;
	letter-spacing: 0;
}

.article-deck {
	max-width: 690px;
	margin: 30px 0 0;
	color: var(--muted);
	font-size: 24px;
	line-height: 1.45;
}

h2 {
	margin: 82px 0 22px;
	font-size: 32px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0;
}

p {
	margin: 0 0 24px;
}

strong {
	font-weight: 700;
}

ul {
	margin: 26px 0 34px;
	padding-left: 28px;
}

li {
	margin: 8px 0;
	padding-left: 8px;
}

li::marker {
	color: var(--accent);
}

.article-media {
	width: min(1120px, calc(100vw - 32px));
	max-width: none;
	height: auto;
	display: block;
	margin: 54px 0 58px 50%;
	transform: translateX(-50%);
}

.article-media--before-after {
	width: min(1040px, calc(100vw - 32px));
}

.article-media--portrait {
	width: min(680px, calc(100vw - 32px));
}

.article-content > p:first-of-type {
	font-size: 24px;
	line-height: 1.5;
}

.page-transition {
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	overflow: hidden;
	background: #11110f;
	box-shadow: 0 -16px 44px rgb(0 0 0 / 28%);
	transform: translate3d(0, 100%, 0);
	will-change: transform;
}

.page-transition.is-snapping {
	transition: transform 520ms cubic-bezier(0.22, 0.78, 0.2, 1);
}

.page-transition__frame {
	width: 100%;
	height: 100%;
	display: block;
	background: #fff;
}

.target-preview {
	min-height: 100%;
	background: #f4f4f2;
	color: #2f302d;
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: 0;
}

.target-preview__top {
	height: 86px;
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 0 clamp(18px, 5vw, 64px);
	background: #fff;
	border-bottom: 1px solid #e2e2dc;
}

.target-preview__logo {
	font-size: 34px;
	line-height: 1;
	font-weight: 700;
	color: #2a2b29;
}

.target-preview__logo span {
	color: #b62b1b;
}

.target-preview__caption {
	max-width: 170px;
	color: #777872;
	font-size: 14px;
	line-height: 1.25;
}

.target-preview__contact {
	margin-left: auto;
	color: #b62b1b;
	font-size: 16px;
}

.target-preview__nav {
	height: 50px;
	display: flex;
	align-items: center;
	gap: clamp(22px, 8vw, 96px);
	padding: 0 clamp(18px, 5vw, 64px);
	background: #a22416;
	color: #fff;
	font-size: 16px;
}

.target-preview__body {
	padding: 32px clamp(18px, 5vw, 64px) 90px;
}

.target-preview__crumbs {
	margin-bottom: 14px;
	color: #858680;
	font-size: 14px;
}

.target-preview__title {
	max-width: 920px;
	font-size: clamp(34px, 5vw, 58px);
	line-height: 1.08;
	font-weight: 600;
}

.target-preview__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin-top: 42px;
}

.target-preview__grid div {
	aspect-ratio: 4 / 3;
	background: linear-gradient(145deg, #f8f8f6, #dddeda);
	border: 1px solid #dbdbd5;
}

.page-transition__shade {
	position: absolute;
	inset: 0;
	background: #090908;
	opacity: var(--preview-shade, 0.58);
	transition: opacity 80ms linear;
}

.page-transition__cue {
	position: absolute;
	left: 50%;
	top: clamp(14px, 3vh, 28px);
	width: min(100% - 32px, 520px);
	transform: translateX(-50%);
	padding: 12px 18px;
	border: 1px solid rgb(255 255 255 / 24%);
	background: rgb(17 17 15 / 72%);
	color: #fff;
	font-size: 15px;
	line-height: 1.35;
	text-align: center;
	letter-spacing: 0;
	backdrop-filter: blur(12px);
	opacity: calc(1 - var(--transition-progress, 0) * 1.8);
	transition: opacity 80ms linear;
}

body.is-leaving .page-transition__shade {
	opacity: 0;
	transition: opacity 520ms ease;
}

body.is-leaving .page-transition__cue {
	opacity: 0;
	transition: opacity 240ms ease;
}

@keyframes article-enter {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 700px) {
	body {
		font-size: 18px;
		line-height: 1.62;
	}

	.article-shell {
		width: min(100% - 32px, 780px);
		padding: 8vh 0 36vh;
	}

	.article-intro {
		padding-bottom: 38px;
		margin-bottom: 48px;
	}

	.article-intro h1 {
		font-size: 42px;
		line-height: 1.05;
	}

	.article-deck,
	.article-content > p:first-of-type {
		font-size: 20px;
	}

	h2 {
		margin-top: 64px;
		font-size: 27px;
	}

	.article-media {
		margin-top: 40px;
		margin-bottom: 44px;
	}

	.page-transition__cue {
		font-size: 14px;
		padding: 11px 14px;
	}

	.target-preview__top {
		height: 72px;
		gap: 12px;
	}

	.target-preview__logo {
		font-size: 30px;
	}

	.target-preview__caption,
	.target-preview__contact,
	.target-preview__nav span:nth-child(n+2) {
		display: none;
	}

	.target-preview__nav {
		height: 46px;
		font-size: 15px;
	}

	.target-preview__body {
		padding-top: 28px;
	}

	.target-preview__title {
		font-size: 30px;
	}

	.target-preview__grid {
		grid-template-columns: 1fr;
		margin-top: 30px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.article-content {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.page-transition,
	.page-transition.is-snapping {
		transition: none;
	}

	.article-shell {
		transform: none;
		filter: none;
	}
}