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

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

body {
	margin: 0;
	font-family: var(--f-sans);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-fg-body);
	background: var(--c-section-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
img { border-style: none; color: transparent; }

a { color: inherit; text-decoration: none; transition: color var(--t-fast), opacity var(--t-fast); }
a:hover { text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--f-serif);
	font-weight: 700;
	line-height: var(--lh-heading);
	margin: 0;
	color: var(--c-fg);
}

p { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button {
	font-family: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: inherit;
}

.msc-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: #000;
	color: #fff;
	padding: 8px 16px;
	z-index: 10000;
}
.msc-skip:focus { left: 0; }

:focus-visible { outline: 2px solid #000; outline-offset: 2px; border-radius: 6px; }

.msc-container {
	max-width: var(--content-max-w);
	margin: 0 auto;
	padding-left: var(--page-side-pad);
	padding-right: var(--page-side-pad);
}
.msc-container--wide {
	max-width: var(--hero-max-w);
	margin: 0 auto;
	padding-left: 50px;
	padding-right: 50px;
}

.msc-clamp-1, .msc-clamp-2, .msc-clamp-3, .msc-clamp-4, .msc-clamp-5, .msc-clamp-6 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.msc-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.msc-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.msc-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.msc-clamp-4 { -webkit-line-clamp: 4; line-clamp: 4; }
.msc-clamp-5 { -webkit-line-clamp: 5; line-clamp: 5; }
.msc-clamp-6 { -webkit-line-clamp: 6; line-clamp: 6; }

.msc-sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0;
	margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media (max-width: 900px) {
	:root {
		--section-py: 48px;
		--section-gap: 24px;
		--page-side-pad: 16px;
		--fs-section: 40px;
		--fs-featured: 26px;
		--fs-card-lg: 22px;
		--fs-hero: 32px;
		--fs-hikayem: 22px;
		--lh-section: 48px;
		--lh-quote: 32px;
		--lh-hikayem: 32px;
		--lh-small: 24px;
	}
	.msc-container--wide { padding-left: 16px; padding-right: 16px; }
}