/* Euclid Circular A - local webfont declarations
	 Files located at: css/fonts/euclid-circular-a/

	 This file declares the font faces used site-wide and a --font-sans
	 variable for easy reuse. Adjust weights if your font source uses
	 different numeric weight mapping.
*/

@font-face {
	font-family: 'Euclid Circular A';
	src: url('../assets/fonts/euclid-circular-a/EuclidCircularA-Regular-WebXL.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Euclid Circular A';
	src: url('../assets/fonts/euclid-circular-a/EuclidCircularA-RegularItalic-WebXL.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Euclid Circular A Medium';
	src: url('../assets/fonts/euclid-circular-a/EuclidCircularA-Medium-WebXL.woff2') format('woff2');
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Euclid Circular A';
	src: url('../assets/fonts/euclid-circular-a/EuclidCircularA-MediumItalic-WebXL.woff2') format('woff2');
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Euclid Circular A';
	src: url('../assets/fonts/euclid-circular-a/EuclidCircularA-Semibold-WebXL.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Euclid Circular A';
	src: url('../assets/fonts/euclid-circular-a/EuclidCircularA-SemiboldItalic-WebXL.woff2') format('woff2');
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

/* Expose a variable with fallbacks for site usage */
:root {
	--font-sans: 'Euclid Circular A', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* Apply baseline font family and sensible defaults */
html, body {
	font-family: var(--font-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Utility: stronger weight mappings for semantic classes */

.font-regular  { font-family: var(--font-sans); font-weight: 400; }
.font-medium   { font-family: 'Euclid Circular A Medium'; }
.font-semibold { font-family: var(--font-sans); font-weight: 600; }

/* ========================================
   Responsive Typography Utilities
   ======================================== */

/* Display sizes (for dramatic hero text) */
.text-display {
	font-size: clamp(80px, 10.4vw, 280px);
	line-height: 0.99;
	letter-spacing: -0.04em;
	font-weight: 500;
}

.text-display-small {
	font-size: clamp(60px, 8vw, 200px);
	line-height: 1;
	letter-spacing: -0.03em;
	font-weight: 500;
}

/* Headlines */
.text-headline-large {
	font-size: clamp(50px, 6vw, 160px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-weight: 500;
}

.text-headline-medium {
	font-size: clamp(40px, 5vw, 120px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-weight: 500;
}

.text-headline-small {
	font-size: clamp(32px, 4vw, 80px);
	line-height: 1.2;
	letter-spacing: -0.01em;
	font-weight: 500;
}

/* Body text */
.text-body-large {
	font-size: clamp(20px, 2.5vw, 48px);
	line-height: 1.4;
	font-weight: 400;
}

.text-body {
	font-size: clamp(16px, 2vw, 32px);
	line-height: 1.5;
	font-weight: 400;
}

.text-body-small {
	font-size: clamp(14px, 1.5vw, 24px);
	line-height: 1.6;
	font-weight: 400;
}

/* Scene-specific responsive text */
.text-scene-title {
	font-size: clamp(60px, 10.4vw, 280px);
	font-weight: 500;
	line-height: 0.99;
	letter-spacing: -0.04em;
}

.text-scene-subtitle {
	font-size: clamp(28px, 2vw, 72px);
	font-weight: 400;
	line-height: 1.4;
}

/* Mobile adjustments */
@media (max-width: 768px) {
	.text-display {
		font-size: clamp(40px, 10vw, 120px);
		line-height: 1.05;
	}

	.text-display-small {
		font-size: clamp(36px, 9vw, 100px);
		line-height: 1.1;
	}

	.text-headline-large {
		font-size: clamp(32px, 8vw, 80px);
		letter-spacing: -0.015em;
	}

	.text-headline-medium {
		font-size: clamp(28px, 7vw, 64px);
	}

	.text-headline-small {
		font-size: clamp(24px, 6vw, 48px);
	}

	.text-scene-title {
		font-size: clamp(40px, 10vw, 120px);
		line-height: 1.05;
	}

	.text-scene-subtitle {
		font-size: clamp(18px, 4.5vw, 32px);
	}
}