<!doctype html>
<html lang="en" class="{% if theme_mode == "dark" %}dark{% endif %}">
{{ head_html|safe }}
<body class="bg-background text-foreground antialiased min-h-screen flex flex-col noir-body">
	{{ admin_banner_html|safe }}
	{% if slots.header %}<header class="w-full">{{ slots.header|safe }}</header>{% endif %}
	<main class="flex-grow w-full">
		<div class="max-w-6xl mx-auto px-4 py-12 md:py-16">
			{% if slots.aside %}
			<div class="grid gap-12 md:grid-cols-[2fr_1fr]">
				<div class="noir-reveal">{% if slots.main %}{{ slots.main|safe }}{% endif %}</div>
				<aside class="w-full md:border-l md:border-[hsl(var(--border))] md:pl-10">{{ slots.aside|safe }}</aside>
			</div>
			{% else %}
			<div class="max-w-3xl mx-auto noir-reveal">{% if slots.main %}{{ slots.main|safe }}{% else %}<div class="py-20 text-center"><p class="noir-label" style="color:hsl(var(--muted-foreground));">No content blocks assigned to this page.</p></div>{% endif %}</div>
			{% endif %}
		</div>
	</main>
	{% if slots.footer %}<footer class="w-full mt-auto noir-rule">{{ slots.footer|safe }}</footer>{% endif %}
	{{ body_end_html|safe }}
	<script>
	(function(){
	if(window.__noirReveal)return;window.__noirReveal=1;
	document.documentElement.classList.add('noir-js');
	var reduce=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;
	var els=document.querySelectorAll('.noir-reveal');
	if(reduce||!('IntersectionObserver' in window)){els.forEach(function(el){el.classList.add('noir-in');});return;}
	var io=new IntersectionObserver(function(entries){entries.forEach(function(e){if(e.isIntersecting){e.target.classList.add('noir-in');io.unobserve(e.target);}});},{threshold:0.12});
	els.forEach(function(el){io.observe(el);});
	})();
	</script>
</body>
</html>
