/* Infoblazer LLC — shared base styles (home + press + archive).

   Theming follows chartblazer.com: the same brand tokens, the dark "stage"
   ground, the brushed-chrome wordmark and the lit-red key. Token source of
   truth is the chartblazer repo, src/app.css — keep these in sync with it.

   Unlike the old paper/ink treatment this is DARK ONLY, as the ChartBlazer
   marketing site is; there is no light variant to keep in step. */

@font-face {
	font-family: 'Space Grotesk';
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	src: url(assets/space-grotesk-500.woff2) format('woff2');
}
@font-face {
	font-family: 'Space Grotesk';
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url(assets/space-grotesk-700.woff2) format('woff2');
}

:root {
	/* ---- brand tokens (mirror of chartblazer src/app.css) ---- */
	--stage: #0a0a0b;
	--stage-2: #131316;
	--chrome: #101012;
	--chrome-2: #17171a;
	--chrome-line: #26262b;
	--on-chrome: #f5f5f6;
	--on-chrome-muted: #b9bbc2;

	--hot: #e5333f; /* reserved for primary actions + the :LLC mark */
	--hot-rgb: 229, 51, 63;
	--hot-deep: #c92a35; /* button gradient bottom stop */
	--hot-rim: #ee5560; /* 1px button rim */

	--silver: #c6cad1;
	--silver-hi: #eef1f4;
	--silver-lo: #8b909a;
	--silver-rgb: 198, 202, 209;

	--metal: linear-gradient(180deg, #f4f6f9 0%, #cfd4db 42%, #969ca6 56%, #e7eaef 100%);

	--disp: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

	/* ---- semantic aliases the page styles are written against ---- */
	--paper: var(--stage);
	--ink: var(--on-chrome);
	--muted: var(--on-chrome-muted);
	--line: var(--chrome-line);
	--body: var(--ui);
	--card-chrome: var(--chrome-2);
	--card-ink: var(--on-chrome);
	--card-muted: var(--on-chrome-muted);
}

html {
	background: var(--stage);
}
body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--on-chrome);
	-webkit-font-smoothing: antialiased;
	/* long unbreakable strings (URLs) must not force sideways page scroll */
	overflow-wrap: break-word;
	/* the ground is never flat black: top vignette + faint brushed grain */
	background:
		radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, 0.028), transparent 55%),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 3px),
		var(--stage);
}
/* film grain — keeps the flat near-blacks from banding; pure SVG, no assets */
body::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 40;
	pointer-events: none;
	opacity: 0.03;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}
.page {
	position: relative;
	z-index: 1;
	max-width: 860px;
	margin: 0 auto;
	padding: 0 24px 72px;
}

/* ---- top bar ---- */
.bar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 16px;
	/* wrap, or the nav overflows and the whole page scrolls sideways on phones */
	flex-wrap: wrap;
	padding: 26px 0 22px;
	border-bottom: 1px solid var(--chrome-line);
}
.brand {
	display: flex;
	flex-direction: column;
	gap: 3px;
	line-height: 1.05;
}
.wordmark {
	font-family: var(--disp);
	font-weight: 700;
	font-size: 21px;
	letter-spacing: -0.02em;
	text-decoration: none;
	/* brushed-chrome sheen — INFOBLAZER reads metallic, :LLC stays red */
	background: var(--metal);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.wordmark span {
	color: var(--hot);
	-webkit-text-fill-color: var(--hot);
}
.tagline {
	/* mono spec-line under the wordmark */
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--on-chrome-muted);
	line-height: 1.4;
}
.bar nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	font-size: 14px;
	padding-bottom: 3px;
}
.bar nav a {
	position: relative;
	color: var(--silver);
	text-decoration: none;
	padding: 0 2px;
	transition: color 0.15s;
}
.bar nav a:hover,
.bar nav a:focus-visible {
	color: var(--silver-hi);
}
.bar nav a[aria-current='page'] {
	color: var(--silver-hi);
}
.bar nav a[aria-current='page']::after {
	/* lit LED strip under the current page — the plugin-skin power-light motif */
	content: '';
	position: absolute;
	left: 2px;
	right: 2px;
	bottom: -7px;
	height: 2px;
	border-radius: 1px;
	background: var(--hot);
	box-shadow: 0 0 8px 1px rgba(var(--hot-rgb), 0.7);
}

/* ---- section labels (red LED dot + mono spec line, as on chartblazer) ---- */
section {
	padding: 56px 0 60px;
	border-bottom: 1px solid var(--chrome-line);
}
section:last-of-type {
	border-bottom: none;
}
.mark {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 26px;
}
.mark::before {
	content: '';
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--hot);
	box-shadow: 0 0 8px 1px rgba(var(--hot-rgb), 0.6);
}
.mark span {
	font-family: var(--mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--on-chrome-muted);
}

/* ---- buttons: skins only, geometry lives on the page (chartblazer pattern) ---- */
.btn {
	border: none;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	transition:
		border-color 0.15s,
		filter 0.15s,
		box-shadow 0.15s,
		transform 0.06s;
}
.btn:active {
	/* mechanical key press */
	transform: translateY(1px);
}
.btn.prim {
	/* lit key: --hot is the TOP stop and the gradient only falls from there,
	   so a button never out-reds the :LLC mark */
	background: linear-gradient(180deg, var(--hot), var(--hot-deep));
	border: 1px solid var(--hot-rim);
	color: #fff;
	box-shadow:
		0 0 24px -8px rgba(var(--hot-rgb), 0.45),
		0 1px 0 rgba(255, 255, 255, 0.25) inset;
}
.btn.prim:hover,
.btn.prim:focus-visible {
	filter: brightness(1.08);
	box-shadow:
		0 0 32px -6px rgba(var(--hot-rgb), 0.7),
		0 1px 0 rgba(255, 255, 255, 0.25) inset;
}
.btn.ghost {
	/* milled: molded dark body + machined top highlight */
	color: var(--on-chrome);
	border: 1px solid var(--chrome-line);
	background: linear-gradient(180deg, #24262c, #16181c);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.06) inset,
		0 2px 6px -3px #000;
}
.btn.ghost:hover,
.btn.ghost:focus-visible {
	border-color: var(--silver-lo);
}

footer {
	padding-top: 26px;
	border-top: 1px solid var(--chrome-line);
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--silver);
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}
}
a:focus-visible {
	outline: 2px solid var(--hot);
	outline-offset: 3px;
}