/* ============================================================
   Swiss Architectural Editorial — page styles (stitch redesign)
   Extracted from inline <style> of stitch code.html
   ============================================================ */

/* ---- Google Fonts (Space Grotesk / Hanken Grotesk / Space Mono / Material Symbols) ---- */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300..900;1,300..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');

/* ---- Base ---- */
html,
body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	scroll-behavior: smooth;
}

body {
	overscroll-behavior-y: auto;
	min-height: 100vh;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar {
	width: 5px;
}

::-webkit-scrollbar-track {
	background: #fbf9f4;
}

::-webkit-scrollbar-thumb {
	background: #dcdad5;
}

::-webkit-scrollbar-thumb:hover {
	background: #111111;
}

/* ---- Swiss Editorial Scroll Reveal States ---- */
.reveal-init {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

.reveal-init.is-revealed {
	opacity: 1;
	transform: translateY(0);
}

/* ---- Header dynamic scroll shadow and tint ---- */
#main-header.scrolled {
	background-color: rgba(251, 249, 244, 0.94);
	box-shadow: 0 4px 20px -2px rgba(17, 17, 17, 0.05);
	border-bottom-color: rgba(17, 17, 17, 0.18);
}

/* ---- Material Symbols icon font ---- */
.material-symbols-outlined {
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}