@import url("https://api.fontshare.com/v2/css?f[]=clash-display@600,700&f[]=satoshi@400,500,700,900&display=swap");

body {
	background:
		radial-gradient(circle at 16% 12%, color-mix(in srgb, var(--pink), transparent 88%), transparent 28rem),
		radial-gradient(circle at 88% 28%, color-mix(in srgb, var(--blue), transparent 90%), transparent 32rem),
		var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.72;
	overflow-x: hidden;
	transition:
		background var(--normal),
		color var(--normal);
}

[data-theme="dark"] body {
	background:
		radial-gradient(circle at 16% 12%, color-mix(in srgb, var(--pink), transparent 94%), transparent 24rem),
		radial-gradient(circle at 88% 28%, color-mix(in srgb, var(--blue), transparent 95%), transparent 28rem),
		var(--bg);
}

@media (hover: hover) and (pointer: fine) {
	body {
		cursor: none;
	}

	body a,
	body button,
	body input,
	body select,
	body textarea {
		cursor: none;
	}
}

body.menu-open {
	overflow: hidden;
}

.container {
	width: min(calc(100% - 32px), var(--container));
	margin-inline: auto;
}

.section {
	padding: clamp(64px, 9vw, 120px) 0;
}

.section--tight {
	padding: clamp(40px, 6vw, 72px) 0;
}

.section__header {
	display: grid;
	gap: var(--space-4);
	margin-bottom: var(--space-8);
}

.section__header--split {
	align-items: end;
	grid-template-columns: 1fr auto;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: 0;
	text-wrap: balance;
}

h1 {
	font-size: clamp(3.25rem, 12vw, 9.5rem);
}

h2 {
	font-size: clamp(2.4rem, 7vw, 5.7rem);
}

h3 {
	font-size: clamp(1.55rem, 3vw, 2.7rem);
}

h4 {
	font-size: 1.2rem;
}

p {
	color: var(--muted);
	font-size: clamp(1rem, 1.15vw, 1.08rem);
	font-weight: 500;
	max-width: 66ch;
}

.eyebrow {
	display: inline-flex;
	width: fit-content;
	align-items: center;
	gap: var(--space-2);
	padding: 0.45rem 0.75rem;
	border: var(--border);
	border-radius: var(--radius-xs);
	background: var(--butter);
	box-shadow: var(--shadow-sm);
	color: #111;
	font-size: 0.78rem;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

[data-theme="dark"] .eyebrow {
	background: var(--surface-strong);
	color: var(--ink);
	border-color: var(--line);
}

.grid {
	display: grid;
	gap: var(--space-6);
}

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

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

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

.split {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(28px, 5vw, 68px);
	align-items: center;
}

.page-hero {
	padding: 142px 0 56px;
}

.page-hero__inner {
	display: grid;
	gap: var(--space-5);
}

.page-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.media-frame {
	position: relative;
	overflow: hidden;
	border: var(--border);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-lg);
	background: var(--surface-strong);
}

[data-theme="dark"] .media-frame {
	box-shadow: var(--shadow-md);
}

.media-frame img {
	aspect-ratio: 4 / 5;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.empty-state {
	border: var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface);
	box-shadow: var(--shadow-md);
	padding: var(--space-8);
	text-align: center;
}

[data-theme="dark"] .empty-state {
	background: var(--surface-strong);
}

.empty-state p {
	margin: 0.75rem auto 1.5rem;
}

@media (max-width: 900px) {
	.grid--4,
	.grid--3,
	.grid--2,
	.split,
	.section__header--split {
		grid-template-columns: 1fr;
	}
}