/* ==========================================================================
   CreativeIncrease — split hero
   Replaces the Envato "Herbalist" theme CSS (240 KB across index + libs).
   Same layout and palette, rebuilt without the magic numbers.
   ========================================================================== */

/* --- fonts ---------------------------------------------------------------
   The old build referenced NunitoSans and Montserrat but never declared them:
   the @font-face block lived in css/preload.min.css, which is not in the repo,
   so every weight silently fell back to the system sans. Only the three faces
   the page actually uses are declared here, woff2 only. */

@font-face {
	font-family: 'Nunito Sans';
	src: url('../fonts/NunitoSans-Black.woff2') format('woff2');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Nunito Sans';
	src: url('../fonts/NunitoSans-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/Montserrat-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}


/* --- tokens --------------------------------------------------------------- */

:root {
	--cream: #fafaf5;
	--green: #479970;
	--ink: #363636;
	--ink-soft: #556260;
	--gold: #efc368;
	--gold-lift: #f4d089;
	--on-gold: #214842;
	--on-green: #ffffff;
	--on-green-soft: rgba(255, 255, 255, .82);

	--display: 'Nunito Sans', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--body: 'Montserrat', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* one source of truth for the seal, so panel clearance can key off it */
	--seal: clamp(88px, 11vmin, 150px);
	--pad: clamp(1.5rem, 5vw, 5.25rem);

	--ease: cubic-bezier(.22, 1, .36, 1);
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font-family: var(--body);
	font-size: 17px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}


/* --- the split -----------------------------------------------------------
   Two equal tracks, so the seam is always the container's exact 50% line —
   vertical when side by side, horizontal when stacked. The seal is centred on
   that same 50%/50% point in both cases, which is the whole trick: one rule,
   no breakpoint-specific offsets, nothing to drift on resize. */

.split {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 100vh;
	min-height: 100dvh;
	isolation: isolate;
}

.panel {
	display: grid;
	align-content: center;
	padding: clamp(3.5rem, 8vh, 7rem) var(--pad);
	min-width: 0;
}

.panel--stacho {
	background: var(--cream);
	color: var(--ink);
}

.panel--kolev {
	background: var(--green);
	color: var(--on-green);
	/* a soft bloom, as in the original, but tied to the panel rather than to a
	   10000px square positioned with negative margins */
	background-image:
		linear-gradient(135deg, rgba(205, 223, 210, .0001) 11%, rgba(158, 188, 166, .28) 79%);
}

/* keep body copy off the seal without hard-coding a pixel indent */
.panel--kolev .panel__inner { padding-left: calc(var(--seal) * .78); }

.panel__inner { max-width: 34rem; }


/* --- seal ---------------------------------------------------------------- */

.seal {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: var(--seal);
	height: auto;
	z-index: 2;
	pointer-events: none;
}


/* --- marks and type ------------------------------------------------------ */

.mark {
	display: block;
	width: clamp(56px, 6vmin, 78px);
	height: auto;
	margin-bottom: clamp(1rem, 2.5vh, 1.75rem);
}

.mark--s {
	color: var(--on-green);
	width: clamp(52px, 5.6vmin, 72px);
}

.name {
	margin: 0 0 .5rem;
	font-family: var(--display);
	font-weight: 900;
	font-size: clamp(2.25rem, 5.4vw, 3.5rem);
	line-height: 1.2;
	letter-spacing: -.02em;
	text-wrap: balance;
}

.panel--kolev .name { color: var(--on-green); }

.role {
	margin: 0 0 clamp(1.5rem, 3.5vh, 2rem);
	max-width: 26rem;
	color: var(--ink-soft);
	text-wrap: pretty;
}

.panel--kolev .role { color: var(--on-green-soft); }


/* --- button -------------------------------------------------------------
   The old one was three stacked swiper clones with a transform:scale(1.1) on
   hover, so you were usually clicking a hidden duplicate. This is a single
   anchor with a real hit area, a pointer-tracked sheen, and a visible focus
   ring. --mx/--my come from js/site.js and default to the centre without it. */

.btn {
	--mx: 50%;
	--my: 50%;

	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .6em;
	min-height: 52px;
	padding: 0 1.6rem;
	border-radius: 999px;
	background: var(--gold);
	color: var(--on-gold);
	font-family: var(--display);
	font-weight: 700;
	font-size: 17px;
	line-height: 1;
	text-decoration: none;
	overflow: hidden;
	isolation: isolate;
	box-shadow: 0 1px 2px rgba(33, 72, 66, .16);
	transition:
		transform .45s var(--ease),
		box-shadow .45s var(--ease),
		background-color .3s var(--ease);
}

/* the sheen follows the cursor; it is a child layer so it can't tint the text */
.btn::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(
		18rem circle at var(--mx) var(--my),
		rgba(255, 255, 255, .75),
		transparent 42%);
	opacity: 0;
	transition: opacity .4s var(--ease);
}

.btn__label { position: relative; }

.btn__arrow {
	width: 1em;
	height: 1em;
	flex: none;
	transition: transform .45s var(--ease);
}

@media (hover: hover) {
	.btn:hover {
		background: var(--gold-lift);
		transform: translateY(-2px);
		box-shadow: 0 10px 24px -8px rgba(33, 72, 66, .45);
	}

	.btn:hover::before { opacity: 1; }
	.btn:hover .btn__arrow { transform: translateX(4px); }
}

.btn:active {
	transform: translateY(0) scale(.985);
	box-shadow: 0 1px 2px rgba(33, 72, 66, .2);
}

.btn:focus-visible {
	outline: 3px solid var(--on-gold);
	outline-offset: 3px;
}

.panel--kolev .btn:focus-visible {
	outline-color: #fff;
}


/* --- stacked -------------------------------------------------------------
   One column, two equal rows. The seam moves from vertical to horizontal and
   the seal needs no repositioning — it is still on the 50%/50% point. Only the
   clearance flips from the left of the copy to the top of it. */

@media (max-width: 900px) {
	.split {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr;
	}

	.panel {
		align-content: center;
		padding-block: clamp(3rem, 9vh, 5.5rem);
	}

	.panel--stacho { padding-bottom: calc(var(--seal) * .62); }

	.panel--kolev .panel__inner { padding-left: 0; }
	.panel--kolev { padding-top: calc(var(--seal) * .62 + clamp(3rem, 9vh, 5.5rem)); }

	.panel__inner { max-width: 40rem; }
}


/* --- preferences --------------------------------------------------------- */

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

	.btn,
	.btn__arrow,
	.btn::before {
		transition: none;
	}

	.btn:hover {
		transform: none;
	}

	.btn:hover .btn__arrow {
		transform: none;
	}
}

@media (forced-colors: active) {
	.btn {
		border: 1px solid ButtonText;
	}

	.btn::before { display: none; }
}