:root {
	--font-family-sans: neue-haas-grotesk-text, sans-serif;
	--font-weight-medium: 500;
	--font-style-normal: normal;
	--font-style-italic: italic;

	--font-size-0: 13px;
	--font-size-1: 15px;
	--font-size-2: 17px;
	--font-size-3: 18px;
	--font-size-4: 22px;

	--line-height-0: 15px;
	--line-height-1: 17px;
	--line-height-2: 18px;
	--line-height-3: 20px;
	--line-height-4: 24px;

	--clay: #D9D3C7;
	--antracit: #4F504F;

	--space-10: 10px;
	--space-20: 20px;
	--space-30: 30px;
	--space-40: 40px;
	--space-50: 50px;

	--max-width-0: 320px;
	--max-width-1: 768px;
}

/* Base styles */
* {
	box-sizing: border-box;
	margin: 0;
}

html {
	font-family: var(--font-family-sans);
	font-weight: var(--font-weight-medium);
	font-style: var(--font-style-normal);
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--clay);
	color: var(--antracit);
}

::selection {
	color: var(--clay);
	background-color: var(--antracit);
  }

/* Typography */
.text-small {
	font-size: var(--font-size-1);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-1);
}

.text-medium {
	font-size: var(--font-size-4);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-4);
	letter-spacing: -0.01em;
}

.text-large {
	font-size: var(--font-size-4);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-4);
	letter-spacing: -0.01em;
}

.title {
	margin-top: 0;
	margin-bottom: 0;
}

/* Links */
a {
	color: var(--antracit);
	text-decoration: none;
}

a:hover {
	opacity: 0.7;
}

/* Utility classes */
.toned-down {
	opacity: 0.7;
}

.w-80 {
	width: 80%;
}

/* Layout */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
}

.section, .site-footer {
	padding-top: var(--space-20);
	position: relative;
}

.section::before, .section-accordion::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1.5px;
	background-color: var(--antracit);
	opacity: 0;
	transition: opacity 1s ease-in-out;
	transition-delay: 0s;
}

.section.visible::before, .section-accordion.visible::before {
	opacity: 1;
}

.section-accordion {
	position: relative;
}

.section-accordion h2 {
	margin-top: var(--space-20);
}

.site-header, .section, .site-footer, .section-accordion {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 30px;
	grid-row-gap: 0px;
}

.grid-cols-2 {
	grid-column-end: span 2;
}

.grid-cols-4 {
	grid-column-end: span 4;
}

/* Section styles */
.section-text {
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
	margin-bottom: var(--space-20);
}

/* Accordion styles */
.accordion-content {
	padding-bottom: var(--space-20);
	columns: 2;
	gap: var(--space-20);
}

/* UI */
button {
	color: var(--antracit);
	font-family: var(--font-family-sans);
}

/* Portable Text */
.portable-text p {
	margin-bottom: var(--space-10);
	font-weight: var(--font-weight-medium);
}

.portable-text p:last-child {
	margin-bottom: 0;
}

.portable-text strong {
	font-weight: var(--font-weight-medium);
}

.portable-text em {
	font-style: var(--font-style-italic);
}

.portable-text blockquote {
	margin: var(--space-20) 0;
	padding-left: var(--space-20);
	border-left: 1.5px solid var(--antracit);
	font-style: var(--font-style-italic);
}

/* Desktop-only styles */
@media (min-width: 769px) {
	.accordion-wrapper :global(.accordion) {
		border-top: 1.5px solid var(--antracit);
		border-bottom: 1.5px solid var(--antracit);
		margin-bottom: -1.5px; /* Prevent double borders */
		margin-top: -1.5px;
	}
}

/* Mobile styles */
@media (max-width: 768px) {
	/* Typography */
	.text-small {
		font-size: var(--font-size-0);
		font-weight: var(--font-weight-medium);
		line-height: var(--line-height-1);
	}

	.text-medium {
		font-size: var(--font-size-2);
		font-weight: var(--font-weight-medium);
		line-height: var(--line-height-3);
	}

	.text-large {
		font-size: var(--font-size-4);
		font-weight: var(--font-weight-medium);
		line-height: var(--line-height-4);
	}

	/* Layout */
	.site-header, .section, .site-footer, .section-accordion {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		grid-column-gap: 0px;
		grid-row-gap: 0px;
	}

	.grid-cols-2 {
		grid-column-end: span 1;
	}

	.grid-cols-4 {
		grid-column-end: span 2;
	}
	
	.w-80 {
		width: 100%;
	}

	/* Accordion styles */
	.accordion-wrapper :global(.accordion) {
		border: none;
	}

	.accordion-wrapper:last-child :global(.accordion) {
		border-bottom: none;
	}

	.accordion-wrapper:first-child :global(.accordion) {
		border-top: 1.5px solid var(--antracit);
	}

	.accordion-content {
		padding-bottom: var(--space-20);
		columns: 1;
		gap: var(--space-20);
	}

	.title {
		margin-top: var(--space-50);
		margin-bottom: var(--space-20);
	}
}