/*
 * Extra responsive refinements layered on top of style.css.
 * Kept separate so page-level and component-level breakpoints in
 * style.css stay easy to scan, while finer typography/spacing
 * adjustments live here.
 */

@media (max-width:1200px){
	:root{ --container:96%; }
}

@media (max-width:768px){
	body{ font-size:15px; }
	.entry-title{ font-size:1.9rem; }
	.footer-brand p{ max-width:100%; }
}

@media (max-width:480px){
	.site-logo{ font-size:1.15rem; }
	.header-cta{ padding:9px 16px; font-size:.82rem; }
	.error-404-wrap{ padding:70px 20px; }
	.scroll-top-btn{ right:16px; bottom:16px; width:42px; height:42px; }
}

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