/* ==========================================================================
   EOL VENTURES — guide pages
   Plain, fast, text-first pages for search engines and AI answer engines.
   Same palette and type as site.css, none of the motion.
   ========================================================================== */

@font-face {
	font-family: "Space Grotesk";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("fonts/SpaceGrotesk.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("fonts/Inter.woff2") format("woff2");
}

@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 100 800;
	font-display: swap;
	src: url("fonts/JetBrainsMono.woff2") format("woff2");
}

:root {
	--bg: #060608;
	--bg-2: #0b0b10;
	--ink: #f2f2f0;
	--muted: #a6a6b2;
	--faint: #55555f;
	--accent: #8c85ff;
	--accent-dim: rgba(140, 133, 255, 0.14);
	--hairline: rgba(242, 242, 240, 0.12);
	--font-display: "Space Grotesk", sans-serif;
	--font-body: "Inter", sans-serif;
	--font-mono: "JetBrains Mono", monospace;
	--pad-x: clamp(16px, 5vw, 72px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
	background: var(--bg);
	color: var(--ink);
	font: 400 17px/1.7 var(--font-body);
	-webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--ink); }

.mono {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.g-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px var(--pad-x);
	border-bottom: 1px solid var(--hairline);
}

.g-logo {
	font: 600 20px/1 var(--font-display);
	color: var(--ink);
	text-decoration: none;
	letter-spacing: 0.02em;
}

.g-langs { display: flex; gap: 14px; flex-wrap: wrap; }
.g-langs a { color: var(--muted); text-decoration: none; }
.g-langs a[aria-current="page"] { color: var(--ink); }

.g-main {
	max-width: 760px;
	margin: 0 auto;
	padding: 56px var(--pad-x) 80px;
}

.g-crumb { color: var(--muted); margin-bottom: 20px; display: block; }

h1 {
	font: 600 clamp(32px, 6vw, 52px)/1.08 var(--font-display);
	letter-spacing: -0.02em;
	margin-bottom: 24px;
}

h2 {
	font: 600 clamp(22px, 3.4vw, 30px)/1.2 var(--font-display);
	margin: 52px 0 16px;
}

h3 {
	font: 600 19px/1.3 var(--font-display);
	margin: 28px 0 8px;
}

p, ul, ol, table { margin-bottom: 16px; }
ul, ol { padding-left: 22px; }
li { margin-bottom: 6px; }
strong { color: var(--ink); font-weight: 600; }

.g-answer {
	font-size: 19px;
	line-height: 1.6;
	padding: 22px 24px;
	border-left: 3px solid var(--accent);
	background: var(--accent-dim);
	border-radius: 0 10px 10px 0;
	margin-bottom: 12px;
}

.g-updated { color: var(--muted); margin-bottom: 36px; display: block; }

.g-table-wrap { overflow-x: auto; margin-bottom: 16px; }
table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
th, td {
	text-align: left;
	vertical-align: top;
	padding: 10px 12px;
	border-bottom: 1px solid var(--hairline);
}
th { font-weight: 600; color: var(--muted); }

.g-cta {
	margin: 52px 0 0;
	padding: 28px;
	border: 1px solid var(--hairline);
	border-radius: 14px;
	background: var(--bg-2);
}
.g-cta h2 { margin-top: 0; }

.g-btn {
	display: inline-block;
	margin-top: 8px;
	padding: 14px 22px;
	border-radius: 999px;
	background: var(--accent);
	color: #0b0b10;
	font-weight: 600;
	text-decoration: none;
}
.g-btn:hover { background: var(--ink); color: #0b0b10; }

details {
	border-bottom: 1px solid var(--hairline);
	padding: 14px 0;
}
summary {
	cursor: pointer;
	font-weight: 600;
	list-style-position: outside;
}
details p { margin: 10px 0 0; color: var(--muted); }

.g-sources { font-size: 14px; color: var(--muted); }

.g-related { margin-top: 40px; }

.g-foot {
	border-top: 1px solid var(--hairline);
	padding: 28px var(--pad-x);
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	color: var(--muted);
}
.g-foot a { color: var(--muted); }

.g-facts {
	display: block;
	padding: 18px 22px;
	border: 1px solid var(--hairline);
	border-radius: 10px;
	margin: -12px 0 36px;
	font-size: 15px;
}
.g-facts-title { display: block; margin-bottom: 10px; }
.g-facts ul { margin-bottom: 10px; }
.g-facts small { color: var(--muted); }