/* ============================================================
   Carriera — shared stylesheet
   Pixel-faithful clone of the Lexington Themes Carriera template
   ============================================================ */

/* ---- CSS custom properties -------------------------------- */
@layer theme {
	:root,
	:host {
		--font-sans: "Geist", sans-serif;
		--font-mono: "Geist Mono", monospace;

		/* brand palette */
		--color-primary: oklch(18.7% 0.015 266.77);
		--color-secondary: oklch(100% 0 0);
		--color-accent: oklch(71.7% 0.157 53);

		/* tailwind color scale tokens used in the template */
		--color-white: #fff;
		--color-red-100: oklch(93.6% 0.032 17.717);
		--color-orange-100: oklch(95.4% 0.038 75.164);
		--color-yellow-100: oklch(97.3% 0.071 103.193);
		--color-yellow-600: oklch(68.1% 0.162 75.834);
		--color-teal-100: oklch(95.3% 0.051 180.801);
		--color-indigo-100: oklch(93% 0.034 272.788);
		--color-purple-100: oklch(94.6% 0.033 307.174);
		--color-rose-100: oklch(94.1% 0.03 12.58);

		/* spacing scale: 1 unit = 0.25rem */
		--spacing: 0.25rem;

		/* container widths */
		--container-sm: 24rem;
		--container-xl: 36rem;
		--container-4xl: 56rem;

		/* type scale */
		--text-xs: 0.75rem;
		--text-xs--line-height: calc(1 / 0.75);
		--text-sm: 0.875rem;
		--text-sm--line-height: calc(1.25 / 0.875);
		--text-base: 1rem;
		--text-base--line-height: calc(1.5 / 1);
		--text-lg: 1.125rem;
		--text-lg--line-height: calc(1.75 / 1.125);
		--text-xl: 1.25rem;
		--text-xl--line-height: calc(1.75 / 1.25);
		--text-2xl: 1.5rem;
		--text-2xl--line-height: calc(2 / 1.5);
		--text-3xl: 1.875rem;
		--text-3xl--line-height: calc(2.25 / 1.875);
		--text-4xl: 2.25rem;
		--text-4xl--line-height: calc(2.5 / 2.25);
		--text-5xl: 3rem;
		--text-5xl--line-height: 1;
		--text-6xl: 3.75rem;
		--text-6xl--line-height: 1;
		--text-7xl: 4.5rem;
		--text-7xl--line-height: 1;
		--text-8xl: 6rem;
		--text-8xl--line-height: 1;
		--text-9xl: 8rem;
		--text-9xl--line-height: 1;

		/* font weights */
		--font-weight-medium: 500;
		--font-weight-semibold: 600;

		/* letter spacing */
		--tracking-tighter: -0.05em;
		--tracking-tight: -0.025em;
		--tracking-wide: 0.025em;

		/* border radius */
		--radius-md: 0.375rem;
		--radius-lg: 0.5rem;
		--radius-xl: 0.75rem;

		/* transitions */
		--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
		--default-transition-duration: 0.15s;
		--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

		/* font families */
		--default-font-family: var(--font-sans);
		--default-mono-font-family: var(--font-mono);
	}
}

/* ---- Theme variants --------------------------------------- */
[data-theme="dark"] {
	--color-primary: oklch(100% 0 0);
	--color-secondary: oklch(18.7% 0.015 266.77);
	--color-accent: oklch(71.7% 0.157 53);
}

[data-theme="accent"] {
	--color-primary: oklch(66.7% 0 0);
	--color-secondary: oklch(18.7% 0.015 266.77);
	--color-accent: oklch(71.7% 0.157 53);
}

/* ---- Theme-switch animation ------------------------------- */
html.theme-animating,
html.theme-animating * {
	transition:
		background-color 0.25s,
		color 0.25s,
		border-color 0.25s,
		fill 0.25s,
		stroke 0.25s,
		outline-color 0.25s;
}

/* ---- Base reset ------------------------------------------- */
@layer base {
	*,
	::after,
	::before,
	::backdrop {
		box-sizing: border-box;
		border: 0 solid;
		margin: 0;
		padding: 0;
	}
	::file-selector-button {
		box-sizing: border-box;
		border: 0 solid;
		margin: 0;
		padding: 0;
	}

	html,
	:host {
		text-size-adjust: 100%;
		tab-size: 4;
		line-height: 1.5;
		font-family: var(
			--default-font-family,
			ui-sans-serif,
			system-ui,
			sans-serif
		);
		-webkit-tap-highlight-color: transparent;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-size: inherit;
		font-weight: inherit;
	}
	a {
		color: inherit;
		text-decoration: inherit;
	}
	b,
	strong {
		font-weight: bolder;
	}
	code,
	kbd,
	samp,
	pre {
		font-family: var(--default-mono-font-family, ui-monospace, monospace);
		font-size: 1em;
	}
	small {
		font-size: 80%;
	}
	img,
	svg,
	video,
	canvas,
	audio,
	iframe,
	embed,
	object {
		vertical-align: middle;
		display: block;
	}
	img,
	video {
		max-width: 100%;
		height: auto;
	}
	ol,
	ul,
	menu {
		list-style: none;
	}
	table {
		text-indent: 0;
		border-color: inherit;
		border-collapse: collapse;
	}

	button,
	input,
	select,
	optgroup,
	textarea {
		font: inherit;
		letter-spacing: inherit;
		color: inherit;
		opacity: 1;
		background-color: transparent;
		border-radius: 0;
	}

	textarea {
		resize: vertical;
	}

	[hidden]:where(:not([hidden="until-found"])) {
		display: none !important;
	}

	button,
	input:where([type="button"], [type="reset"], [type="submit"]) {
		appearance: button;
	}
}

/* ============================================================
   Utility classes (mirrors the compiled Tailwind output)
   ============================================================ */

/* ---- Position --------------------------------------------- */
.absolute {
	position: absolute;
}
.fixed {
	position: fixed;
}
.relative {
	position: relative;
}

.inset-0 {
	inset: 0;
}
.right-4 {
	right: calc(var(--spacing) * 4);
}
.bottom-4 {
	bottom: calc(var(--spacing) * 4);
}

.z-10 {
	z-index: 10;
}
.z-40 {
	z-index: 40;
}
.z-50 {
	z-index: 50;
}
.z-80 {
	z-index: 80;
}

/* ---- Display --------------------------------------------- */
.block {
	display: block;
}
.flex {
	display: flex;
}
.grid {
	display: grid;
}
.hidden {
	display: none;
}
.inline {
	display: inline;
}
.inline-block {
	display: inline-block;
}

/* ---- Sizing ---------------------------------------------- */
.aspect-square {
	aspect-ratio: 1 / 1;
}

.size-3 {
	width: calc(var(--spacing) * 3);
	height: calc(var(--spacing) * 3);
}
.size-4 {
	width: calc(var(--spacing) * 4);
	height: calc(var(--spacing) * 4);
}
.size-5 {
	width: calc(var(--spacing) * 5);
	height: calc(var(--spacing) * 5);
}
.size-6 {
	width: calc(var(--spacing) * 6);
	height: calc(var(--spacing) * 6);
}
.size-7 {
	width: calc(var(--spacing) * 7);
	height: calc(var(--spacing) * 7);
}
.size-7\.5 {
	width: calc(var(--spacing) * 7.5);
	height: calc(var(--spacing) * 7.5);
}
.size-8 {
	width: calc(var(--spacing) * 8);
	height: calc(var(--spacing) * 8);
}
.size-9 {
	width: calc(var(--spacing) * 9);
	height: calc(var(--spacing) * 9);
}
.size-10 {
	width: calc(var(--spacing) * 10);
	height: calc(var(--spacing) * 10);
}
.size-11 {
	width: calc(var(--spacing) * 11);
	height: calc(var(--spacing) * 11);
}
.size-12 {
	width: calc(var(--spacing) * 12);
	height: calc(var(--spacing) * 12);
}
.size-13 {
	width: calc(var(--spacing) * 13);
	height: calc(var(--spacing) * 13);
}
.size-full {
	width: 100%;
	height: 100%;
}

.h-7\.5 {
	height: calc(var(--spacing) * 7.5);
}
.h-8 {
	height: calc(var(--spacing) * 8);
}
.h-9 {
	height: calc(var(--spacing) * 9);
}
.h-10 {
	height: calc(var(--spacing) * 10);
}
.h-11 {
	height: calc(var(--spacing) * 11);
}
.h-12 {
	height: calc(var(--spacing) * 12);
}
.h-13 {
	height: calc(var(--spacing) * 13);
}
.h-full {
	height: 100%;
}

.max-h-0 {
	max-height: 0;
}
.max-h-50 {
	max-height: calc(var(--spacing) * 50);
}
.max-h-100 {
	max-height: calc(var(--spacing) * 100);
}
.max-h-200 {
	max-height: calc(var(--spacing) * 200);
}

.min-h-screen {
	min-height: 100vh;
}
.min-h-svh {
	min-height: 100svh;
}

.w-auto {
	width: auto;
}
.w-full {
	width: 100%;
}

.max-w-none {
	max-width: none;
}
.max-w-screen {
	max-width: 100vw;
}
.max-w-sm {
	max-width: var(--container-sm);
}
.max-w-xl {
	max-width: var(--container-xl);
}

/* ---- Margin ---------------------------------------------- */
.m-4 {
	margin: calc(var(--spacing) * 4);
}
.mx-2 {
	margin-inline: calc(var(--spacing) * 2);
}
.mx-auto {
	margin-inline: auto;
}

.mt-1 {
	margin-top: var(--spacing);
}
.mt-2 {
	margin-top: calc(var(--spacing) * 2);
}
.mt-4 {
	margin-top: calc(var(--spacing) * 4);
}
.mt-6 {
	margin-top: calc(var(--spacing) * 6);
}
.mt-8 {
	margin-top: calc(var(--spacing) * 8);
}
.mt-12 {
	margin-top: calc(var(--spacing) * 12);
}

.mb-2 {
	margin-bottom: calc(var(--spacing) * 2);
}
.mb-8 {
	margin-bottom: calc(var(--spacing) * 8);
}

.ml-auto {
	margin-left: auto;
}

/* ---- Padding --------------------------------------------- */
.p-1 {
	padding: var(--spacing);
}
.p-2 {
	padding: calc(var(--spacing) * 2);
}
.p-4 {
	padding: calc(var(--spacing) * 4);
}

.px-0 {
	padding-inline: 0;
}
.px-1\.5 {
	padding-inline: calc(var(--spacing) * 1.5);
}
.px-2 {
	padding-inline: calc(var(--spacing) * 2);
}
.px-4 {
	padding-inline: calc(var(--spacing) * 4);
}
.px-5 {
	padding-inline: calc(var(--spacing) * 5);
}
.px-8 {
	padding-inline: calc(var(--spacing) * 8);
}

.py-1 {
	padding-block: var(--spacing);
}
.py-2 {
	padding-block: calc(var(--spacing) * 2);
}
.py-3 {
	padding-block: calc(var(--spacing) * 3);
}
.py-4 {
	padding-block: calc(var(--spacing) * 4);
}
.py-12 {
	padding-block: calc(var(--spacing) * 12);
}
.py-24 {
	padding-block: calc(var(--spacing) * 24);
}

.pt-2 {
	padding-top: calc(var(--spacing) * 2);
}
.pt-4 {
	padding-top: calc(var(--spacing) * 4);
}
.pb-2 {
	padding-bottom: calc(var(--spacing) * 2);
}
.pb-8 {
	padding-bottom: calc(var(--spacing) * 8);
}
.pl-3 {
	padding-left: calc(var(--spacing) * 3);
}

/* ---- Flex / Grid ----------------------------------------- */
.flex-1 {
	flex: 1 1 0%;
}
.grow {
	flex-grow: 1;
}
.flex-col {
	flex-direction: column;
}
.flex-wrap {
	flex-wrap: wrap;
}

.items-baseline {
	align-items: baseline;
}
.items-center {
	align-items: center;
}
.items-start {
	align-items: flex-start;
}

.justify-between {
	justify-content: space-between;
}
.justify-center {
	justify-content: center;
}
.justify-start {
	justify-content: flex-start;
}

.grid-cols-1 {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---- Gap ------------------------------------------------- */
.gap-1 {
	gap: var(--spacing);
}
.gap-2 {
	gap: calc(var(--spacing) * 2);
}
.gap-3 {
	gap: calc(var(--spacing) * 3);
}
.gap-4 {
	gap: calc(var(--spacing) * 4);
}
.gap-8 {
	gap: calc(var(--spacing) * 8);
}
.gap-10 {
	gap: calc(var(--spacing) * 10);
}
.gap-12 {
	gap: calc(var(--spacing) * 12);
}

.gap-x-12 {
	column-gap: calc(var(--spacing) * 12);
}
.gap-y-2 {
	row-gap: calc(var(--spacing) * 2);
}
.gap-y-4 {
	row-gap: calc(var(--spacing) * 4);
}
.gap-y-8 {
	row-gap: calc(var(--spacing) * 8);
}
.gap-y-12 {
	row-gap: calc(var(--spacing) * 12);
}

/* ---- Space (stack) --------------------------------------- */
:where(.space-y-1 > :not(:last-child)) {
	margin-bottom: var(--spacing);
}
:where(.space-y-2 > :not(:last-child)) {
	margin-bottom: calc(var(--spacing) * 2);
}
:where(.space-y-12 > :not(:last-child)) {
	margin-bottom: calc(var(--spacing) * 12);
}
:where(.space-x-2 > :not(:last-child)) {
	margin-right: calc(var(--spacing) * 2);
}

/* ---- Divide (border between children) -------------------- */
:where(.divide-y > :not(:last-child)) {
	border-bottom-style: solid;
	border-bottom-width: 1px;
}
:where(.divide-primary\/10 > :not(:last-child)) {
	border-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
}

/* ---- Overflow -------------------------------------------- */
.overflow-hidden {
	overflow: hidden;
}
.overflow-y-auto {
	overflow-y: auto;
}
.scroll-smooth {
	scroll-behavior: smooth;
}

/* ---- Scrollbar hide -------------------------------------- */
.scrollbar-hide {
	scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
	display: none;
}

/* ---- Border radius --------------------------------------- */
.rounded {
	border-radius: 0.25rem;
}
.rounded-full {
	border-radius: 9999px;
}
.rounded-lg {
	border-radius: var(--radius-lg);
}
.rounded-md {
	border-radius: var(--radius-md);
}

/* ---- Borders --------------------------------------------- */
.border-0 {
	border-style: solid;
	border-width: 0;
}
.border-y {
	border-top: 1px solid;
	border-bottom: 1px solid;
}
.border-t {
	border-top: 1px solid;
}
.border-b {
	border-bottom: 1px solid;
}
.border-dotted {
	border-style: dotted;
}

.border-primary\/10 {
	border-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
}
.border-primary\/20 {
	border-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
}
.border-primary\/30 {
	border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
}

/* ---- Background ------------------------------------------ */
.bg-\[\#101319\] {
	background-color: #101319;
}
.bg-\[\#245230\] {
	background-color: #245230;
}
.bg-\[\#305133\] {
	background-color: #305133;
}
.bg-\[\#949494\] {
	background-color: #949494;
}
.bg-\[\#d38c54\] {
	background-color: #d38c54;
}
.bg-\[\#ffffff\] {
	background-color: #ffffff;
}

.bg-accent {
	background-color: var(--color-accent);
}
.bg-primary {
	background-color: var(--color-primary);
}
.bg-secondary {
	background-color: var(--color-secondary);
}
.bg-transparent {
	background-color: transparent;
}
.bg-white {
	background-color: var(--color-white);
}

.bg-indigo-100 {
	background-color: var(--color-indigo-100);
}
.bg-orange-100 {
	background-color: var(--color-orange-100);
}
.bg-purple-100 {
	background-color: var(--color-purple-100);
}
.bg-red-100 {
	background-color: var(--color-red-100);
}
.bg-rose-100 {
	background-color: var(--color-rose-100);
}
.bg-teal-100 {
	background-color: var(--color-teal-100);
}
.bg-yellow-100 {
	background-color: var(--color-yellow-100);
}

.bg-primary\/10 {
	background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
}
.bg-secondary\/50 {
	background-color: color-mix(
		in oklab,
		var(--color-secondary) 50%,
		transparent
	);
}

/* ---- Object fit ------------------------------------------ */
.object-cover {
	object-fit: cover;
}
.object-center {
	object-position: center center;
}

/* ---- Text align ------------------------------------------ */
.text-center {
	text-align: center;
}
.text-left {
	text-align: left;
}

.align-middle {
	vertical-align: middle;
}

/* ---- Font family ----------------------------------------- */
.font-mono {
	font-family: var(--font-mono);
}

/* ---- Font size ------------------------------------------- */
.text-xs {
	font-size: var(--text-xs);
	line-height: var(--text-xs--line-height);
}
.text-sm {
	font-size: var(--text-sm);
	line-height: var(--text-sm--line-height);
}
.text-base {
	font-size: var(--text-base);
	line-height: var(--text-base--line-height);
}
.text-lg {
	font-size: var(--text-lg);
	line-height: var(--text-lg--line-height);
}
.text-xl {
	font-size: var(--text-xl);
	line-height: var(--text-xl--line-height);
}
.text-2xl {
	font-size: var(--text-2xl);
	line-height: var(--text-2xl--line-height);
}
.text-3xl {
	font-size: var(--text-3xl);
	line-height: var(--text-3xl--line-height);
}
.text-4xl {
	font-size: var(--text-4xl);
	line-height: var(--text-4xl--line-height);
}
.text-5xl {
	font-size: var(--text-5xl);
	line-height: var(--text-5xl--line-height);
}

.text-\[0\.6rem\] {
	font-size: 0.6rem;
}

/* ---- Font weight ----------------------------------------- */
.font-medium {
	font-weight: var(--font-weight-medium);
}
.font-semibold {
	font-weight: var(--font-weight-semibold);
}

/* ---- Letter spacing -------------------------------------- */
.tracking-tight {
	letter-spacing: var(--tracking-tight);
}
.tracking-tighter {
	letter-spacing: var(--tracking-tighter);
}
.tracking-wide {
	letter-spacing: var(--tracking-wide);
}

/* ---- Text wrap ------------------------------------------- */
.text-balance {
	text-wrap: balance;
}

/* ---- Text color ------------------------------------------ */
.text-primary {
	color: var(--color-primary);
}
.text-secondary {
	color: var(--color-secondary);
}
.text-white {
	color: var(--color-white);
}
.text-yellow-600 {
	color: var(--color-yellow-600);
}

.text-primary\/60 {
	color: color-mix(in oklab, var(--color-primary) 60%, transparent);
}
.text-primary\/70 {
	color: color-mix(in oklab, var(--color-primary) 70%, transparent);
}
.text-primary\/80 {
	color: color-mix(in oklab, var(--color-primary) 80%, transparent);
}

/* ---- Text transform -------------------------------------- */
.capitalize {
	text-transform: capitalize;
}
.lowercase {
	text-transform: lowercase;
}
.uppercase {
	text-transform: uppercase;
}
.not-italic {
	font-style: normal;
}

/* ---- Shadows / rings ------------------------------------- */
.shadow-2xl {
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.ring {
	box-shadow: 0 0 0 1px currentColor;
}
.ring-current {
	--ring-color: currentColor;
}

.ring-primary\/10 {
	box-shadow: 0 0 0 1px
		color-mix(in oklab, var(--color-primary) 10%, transparent);
}

.ring-offset-2 {
	outline-offset: 2px;
}
.ring-offset-secondary {
	/* used via JS focus states */
}

/* ---- Outline --------------------------------------------- */
.outline {
	outline-style: solid;
	outline-width: 1px;
}
.outline-2 {
	outline-style: solid;
	outline-width: 2px;
}
.outline-primary {
	outline-color: var(--color-primary);
}

.outline-primary\/10 {
	outline-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
}
.outline-primary\/20 {
	outline-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
}

/* ---- Backdrop -------------------------------------------- */
.backdrop-blur {
	backdrop-filter: blur(8px);
}

/* ---- Transitions ----------------------------------------- */
.transition {
	transition-property:
		color, background-color, border-color, opacity, box-shadow, transform;
	transition-timing-function: var(--ease-in-out);
	transition-duration: var(--default-transition-duration);
}
.transition-all {
	transition-property: all;
	transition-timing-function: var(--ease-in-out);
	transition-duration: var(--default-transition-duration);
}
.transition-colors {
	transition-property: color, background-color, border-color;
	transition-timing-function: var(--ease-in-out);
	transition-duration: var(--default-transition-duration);
}
.transition-opacity {
	transition-property: opacity;
	transition-timing-function: var(--ease-in-out);
	transition-duration: var(--default-transition-duration);
}
.transition-transform {
	transition-property: transform;
	transition-timing-function: var(--ease-in-out);
	transition-duration: var(--default-transition-duration);
}

.duration-200 {
	transition-duration: 0.2s;
}
.duration-300 {
	transition-duration: 0.3s;
}
.ease-in-out {
	transition-timing-function: var(--ease-in-out);
}

/* ---- Cursor ---------------------------------------------- */
.cursor-pointer {
	cursor: pointer;
}

/* ---- Misc ------------------------------------------------ */
.list-disc {
	list-style-type: disc;
}

/* ---- Hover states (pointer devices only) ----------------- */
@media (hover: hover) {
	.hover\:bg-accent\/80:hover {
		background-color: color-mix(in oklab, var(--color-accent) 80%, transparent);
	}
	.hover\:bg-primary\/20:hover {
		background-color: color-mix(
			in oklab,
			var(--color-primary) 20%,
			transparent
		);
	}
	.hover\:bg-primary\/80:hover {
		background-color: color-mix(
			in oklab,
			var(--color-primary) 80%,
			transparent
		);
	}
	.hover\:text-primary:hover {
		color: var(--color-primary);
	}
	.hover\:text-primary\/40:hover {
		color: color-mix(in oklab, var(--color-primary) 40%, transparent);
	}
	.hover\:text-primary\/60:hover {
		color: color-mix(in oklab, var(--color-primary) 60%, transparent);
	}
	.hover\:underline:hover {
		text-decoration-line: underline;
	}
	.hover\:opacity-80:hover {
		opacity: 0.8;
	}

	/* group-hover: job card title turns accent */
	.group:hover .group-hover\:text-accent {
		color: var(--color-accent);
	}
}

/* ---- Focus states ---------------------------------------- */
.focus\:border-primary:focus {
	border-color: var(--color-primary);
}
.focus\:ring-0:focus {
	box-shadow: none;
}
.focus\:ring-2:focus {
	box-shadow: 0 0 0 2px var(--color-accent);
}
.focus\:ring-accent:focus {
	--ring-color: var(--color-accent);
}
.focus\:ring-primary:focus {
	--ring-color: var(--color-primary);
}
.focus\:ring-offset-2:focus {
	outline-offset: 2px;
}
.focus\:outline-none:focus {
	outline: none;
}

/* ---- Responsive: sm (≥640px) ----------------------------- */
@media (width >= 40rem) {
	.sm\:text-3xl {
		font-size: var(--text-3xl);
		line-height: var(--text-3xl--line-height);
	}
	.sm\:text-4xl {
		font-size: var(--text-4xl);
		line-height: var(--text-4xl--line-height);
	}
	.sm\:text-5xl {
		font-size: var(--text-5xl);
		line-height: var(--text-5xl--line-height);
	}
	.sm\:text-6xl {
		font-size: var(--text-6xl);
		line-height: var(--text-6xl--line-height);
	}
	.sm\:text-7xl {
		font-size: var(--text-7xl);
		line-height: var(--text-7xl--line-height);
	}
	.sm\:text-xl {
		font-size: var(--text-xl);
		line-height: var(--text-xl--line-height);
	}
}

/* ---- Responsive: md (≥768px) ----------------------------- */
@media (width >= 48rem) {
	.md\:grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.md\:grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.md\:text-2xl {
		font-size: var(--text-2xl);
		line-height: var(--text-2xl--line-height);
	}
	.md\:text-3xl {
		font-size: var(--text-3xl);
		line-height: var(--text-3xl--line-height);
	}
	.md\:text-4xl {
		font-size: var(--text-4xl);
		line-height: var(--text-4xl--line-height);
	}
	.md\:text-5xl {
		font-size: var(--text-5xl);
		line-height: var(--text-5xl--line-height);
	}
	.md\:text-6xl {
		font-size: var(--text-6xl);
		line-height: var(--text-6xl--line-height);
	}
	.md\:text-7xl {
		font-size: var(--text-7xl);
		line-height: var(--text-7xl--line-height);
	}
	.md\:text-8xl {
		font-size: var(--text-8xl);
		line-height: var(--text-8xl--line-height);
	}
	.md\:text-9xl {
		font-size: var(--text-9xl);
		line-height: var(--text-9xl--line-height);
	}
	.md\:text-xl {
		font-size: var(--text-xl);
		line-height: var(--text-xl--line-height);
	}
	.md\:text-balance {
		text-wrap: balance;
	}
}

/* ---- Responsive: lg (≥1024px) ---------------------------- */
@media (width >= 64rem) {
	.lg\:sticky {
		position: sticky;
	}
	.lg\:top-24 {
		top: calc(var(--spacing) * 24);
	}
	.lg\:z-40 {
		z-index: 40;
	}
	.lg\:z-50 {
		z-index: 50;
	}
	.lg\:col-span-2 {
		grid-column: span 2 / span 2;
	}
	.lg\:col-span-3 {
		grid-column: span 3 / span 3;
	}
	.lg\:mt-24 {
		margin-top: calc(var(--spacing) * 24);
	}
	.lg\:block {
		display: block;
	}
	.lg\:flex {
		display: flex;
	}
	.lg\:hidden {
		display: none;
	}
	.lg\:w-1\/2 {
		width: 50%;
	}
	.lg\:w-1\/4 {
		width: 25%;
	}
	.lg\:grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.lg\:grid-cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.lg\:grid-cols-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
	.lg\:flex-nowrap {
		flex-wrap: nowrap;
	}
	.lg\:gap-24 {
		gap: calc(var(--spacing) * 24);
	}
	.lg\:py-24 {
		padding-block: calc(var(--spacing) * 24);
	}

	.lg\:text-2xl {
		font-size: var(--text-2xl);
		line-height: var(--text-2xl--line-height);
	}
	.lg\:text-3xl {
		font-size: var(--text-3xl);
		line-height: var(--text-3xl--line-height);
	}
	.lg\:text-4xl {
		font-size: var(--text-4xl);
		line-height: var(--text-4xl--line-height);
	}
	.lg\:text-5xl {
		font-size: var(--text-5xl);
		line-height: var(--text-5xl--line-height);
	}
	.lg\:text-6xl {
		font-size: var(--text-6xl);
		line-height: var(--text-6xl--line-height);
	}
	.lg\:text-7xl {
		font-size: var(--text-7xl);
		line-height: var(--text-7xl--line-height);
	}
	.lg\:text-8xl {
		font-size: var(--text-8xl);
		line-height: var(--text-8xl--line-height);
	}
	.lg\:text-9xl {
		font-size: var(--text-9xl);
		line-height: var(--text-9xl--line-height);
	}
	.lg\:text-\[10rem\] {
		font-size: 10rem;
	}
	.lg\:text-\[12rem\] {
		font-size: 12rem;
	}
	.lg\:text-balance {
		text-wrap: balance;
	}
}

/* ---- Responsive: 2xl (≥1536px) --------------------------- */
@media (width >= 96rem) {
	.\32xl\:max-w-4xl {
		max-width: var(--container-4xl);
	}
	.\32xl\:max-w-\[1400px\] {
		max-width: 1400px;
	}
}

/* ---- Prose (blog content) -------------------------------- */
.prose {
	color: oklch(37.3% 0.034 259.733);
	max-width: 65ch;
	font-size: 1rem;
	line-height: 1.75;

	--tw-prose-body: oklch(37.3% 0.034 259.733);
	--tw-prose-headings: oklch(21% 0.034 264.665);
	--tw-prose-lead: oklch(44.6% 0.03 256.802);
	--tw-prose-links: oklch(21% 0.034 264.665);
	--tw-prose-bold: oklch(21% 0.034 264.665);
	--tw-prose-counters: oklch(55.1% 0.027 264.364);
	--tw-prose-bullets: oklch(87.2% 0.01 258.338);
	--tw-prose-hr: oklch(92.8% 0.006 264.531);
	--tw-prose-quotes: oklch(21% 0.034 264.665);
	--tw-prose-quote-borders: oklch(92.8% 0.006 264.531);
	--tw-prose-captions: oklch(55.1% 0.027 264.364);
	--tw-prose-code: oklch(21% 0.034 264.665);
	--tw-prose-pre-code: oklch(92.8% 0.006 264.531);
	--tw-prose-pre-bg: oklch(27.8% 0.033 256.848);
	--tw-prose-th-borders: oklch(87.2% 0.01 258.338);
	--tw-prose-td-borders: oklch(92.8% 0.006 264.531);
}