/**
 * Blue Frame Films: base.css
 *
 * Purpose:  Design tokens (CSS variables), reset, body and typography, shared text styles.
 * Used by:  Every front-end page (first stylesheet; all others depend on it).
 * To edit:  Change brand colors, radius or content width in :root and they apply site-wide.
 */

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
	--bg: #05070d;
	--bg2: #0a0f1c;
	--panel: #0e1526;
	--elec: #1e7bff;
	--elec2: #00c2ff;
	--glow: rgba(30,123,255,.45);
	--text: #eef3ff;
	--muted: #94a3c4;
	--line: rgba(120,160,255,.15);
	--draft: #ffb020;
	--r: 14px;
	--max: 1180px;

	/* Film strip header/footer (header.css, footer.css): a 24x14 sprocket-hole tile drawn as
	   inline SVG, scaled to the band height so it stays crisp at any width. */
	--film-band: 12px;              /* sprocket band height (top and bottom); 8px on phones */
	--nav-h: 60px;                  /* header bar height between the bands; 52px on phones */
	--film-base: #06080f;
	--film-holes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Crect x='6.5' y='3.5' width='11' height='7' rx='1.8' fill='%23d8e8ff' fill-opacity='.22' stroke='%2300c2ff' stroke-opacity='.45' stroke-width='.6'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Reset and document
   ========================================================================== */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--nav-h) + 2 * var(--film-band) + 8px + var(--wp-admin--admin-bar--height, 0px));
}

body {
	font-family: "Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
	background: var(--bg);
	color: var(--text);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
	text-decoration: none;
}

/* ==========================================================================
   Typography
   ========================================================================== */
h1,
h2,
h3 {
	line-height: 1.1;
	letter-spacing: -.02em;
}

h2 {
	font-size: clamp(1.9rem,3.8vw,2.8rem);
	margin: .5rem 0 .9rem;
}

.eyebrow {
	font-size: .76rem;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--elec2);
	font-weight: 700;
}

.lead {
	color: var(--muted);
	max-width: 640px;
	font-size: 1.05rem;
}

/* Film strip: slimmer header and smaller sprockets on phones */
@media (max-width:760px) {
	:root {
		--film-band: 8px;
		--nav-h: 52px;
	}
}