@import url("../style.css");

:root {
	--page: #0b0b0d;
	--panel: #121216;
	--panel-light: #19191f;
	--line: #2b2b32;
	--muted: #96969f;
	--accent: #e63946;
	--cream: #f5f0e9;
}

* {
	box-sizing: border-box;
}

body {
	min-height: 100vh;
	margin: 0;
	background:
		radial-gradient(circle at 78% 12%, rgba(230, 57, 70, 0.1), transparent 28rem),
		linear-gradient(135deg, #0b0b0d 0%, #101015 52%, #0b0b0d 100%);
	color: var(--cream);
	font-family: Arial, Helvetica, sans-serif;
}

.navbar {
	position: sticky;
	top: 0;
	height: 76px;
	padding: 0 clamp(24px, 6vw, 88px);
	background: rgba(11, 11, 13, 0.86);
	border-bottom: 1px solid var(--line);
	backdrop-filter: blur(14px);
	z-index: 5;
}

.logo {
	color: #fff;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -1px;
	text-decoration: none;
}

.logo-accent {
	color: var(--accent);
}

nav a.active {
	color: #fff;
}

main {
	width: min(1240px, calc(100% - 48px));
	margin: 0 auto;
}

.page-intro {
	max-width: 710px;
	padding: clamp(82px, 12vw, 150px) 0 72px;
}

.eyebrow,
.card-index,
.step-mark {
	margin: 0 0 16px;
	color: var(--accent);
	font-family: "DM Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

h1,
h2,
h3,
p {
	margin-top: 0;
}

h1 {
	margin-bottom: 22px;
	color: #fff;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(54px, 8vw, 102px);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 0.94;
}

h1 span {
	color: var(--accent);
	font-style: italic;
}

.intro-copy {
	max-width: 580px;
	color: var(--muted);
	font-size: 16px;
	line-height: 1.7;
}

.workspace {
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
	padding-bottom: 110px;
}

.gallery-heading {
	display: flex;
	justify-content: space-between;
	gap: 20px;
}

h2 {
	color: #fff;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 29px;
	font-weight: 600;
}

.gallery-heading {
	align-items: baseline;
	border-bottom: 1px solid var(--line);
}

.gallery-heading h2 {
	margin-bottom: 20px;
}

.webhook-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	padding-top: 26px;
}

.webhook-card {
	overflow: hidden;
	background: var(--panel);
	border: 1px solid var(--line);
	animation: cardIn 0.5s ease both;
}

@keyframes cardIn {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}

.card-image-wrap {
	position: relative;
	overflow: hidden;
	background: var(--panel-light);
}

.card-image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.card-copy {
	padding: 20px;
}

.card-index {
	margin-bottom: 10px;
	color: #777780;
	font-size: 10px;
}

.card-copy h3 {
	margin-bottom: 8px;
	color: #fff;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 22px;
}

.card-copy p:last-child {
	margin-bottom: 0;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.55;
}

.footer {
	display: flex;
	justify-content: space-between;
	padding: 24px max(24px, calc((100% - 1240px) / 2));
	border-top: 1px solid var(--line);
	color: #777780;
	font-family: "DM Mono", monospace;
	font-size: 11px;
}

.footer b {
	color: var(--accent);
	font-weight: 400;
}

@media (max-width: 820px) {
	.navbar {
		padding: 0 24px;
	}

	nav {
		gap: 16px;
	}

	nav a:nth-child(3) {
		display: none;
	}

	.workspace {
		grid-template-columns: 1fr;
	}

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

@media (max-width: 560px) {
	main {
		width: min(100% - 32px, 1240px);
	}

	.logo {
		font-size: 18px;
	}

	.page-intro {
		padding-top: 72px;
	}

	.webhook-grid {
		grid-template-columns: 1fr;
	}

	.footer {
		gap: 12px;
		flex-direction: column;
	}
}