/**
 * Theme 26 — base tokens, typography, spine layout.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	--fk-bg: #05050c;
	--fk-band: #07070f;
	--fk-text: #f2f4ff;
	--fk-text-75: rgba(242, 244, 255, 0.75);
	--fk-text-70: rgba(242, 244, 255, 0.7);
	--fk-text-62: rgba(242, 244, 255, 0.62);
	--fk-text-55: rgba(242, 244, 255, 0.55);
	--fk-text-42: rgba(242, 244, 255, 0.42);
	--fk-text-40: rgba(242, 244, 255, 0.4);
	--fk-text-36: rgba(242, 244, 255, 0.36);
	--fk-hairline: rgba(242, 244, 255, 0.09);
	--fk-hairline-strong: rgba(242, 244, 255, 0.1);
	--fk-hairline-12: rgba(242, 244, 255, 0.12);
	--accent: #7a3cff;
	--ice: #6fe3ff;
	--fk-lilac: #b48cff;
	--fk-fringe-magenta: rgba(255, 0, 180, 0.85);
	--fk-fringe-cyan: rgba(0, 230, 255, 0.85);
	--fk-paper: #f2f4ff;
	--fk-font: "Space Grotesk", Helvetica, Arial, sans-serif;
	--fk-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--fk-header-h: 72px;
	--fk-max: 1440px;
	--fk-gutter: clamp(18px, 4vw, 72px);
	--fk-section-pad-top: clamp(56px, 8vh, 96px);
	--fk-section-pad-bottom: clamp(70px, 10vh, 120px);
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--fk-bg);
	color: var(--fk-text);
	font-family: var(--fk-font);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--ice);
	text-decoration: none;
	transition: color 160ms ease;
}

a:hover {
	color: #ffffff;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--ice);
	outline-offset: 3px;
}

p {
	text-wrap: pretty;
}

h1,
h2,
h3,
h4 {
	text-wrap: balance;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.05;
}

::selection {
	background: var(--accent);
	color: #fff;
}

.fk-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 12px 16px;
	background: var(--fk-paper);
	color: var(--fk-bg);
	font-weight: 600;
}

.fk-skip-link:focus {
	left: var(--fk-gutter);
	top: 12px;
}

/* Main content clears the fixed header. */
.fk-main {
	padding-top: var(--fk-header-h);
	min-height: 40vh;
}

/* Homepage hero owns top spacing instead of the 72px chrome clear. */
body.home .fk-main,
body.front-page .fk-main {
	padding-top: 0;
}

.fk-shell {
	position: relative;
	min-height: 100vh;
	background: var(--fk-bg);
}

/* Layout primitives */
.fk-wrap {
	max-width: var(--fk-max);
	margin-inline: auto;
	padding-inline: var(--fk-gutter);
}

.fk-spine {
	max-width: var(--fk-max);
	margin-inline: auto;
	padding-inline: var(--fk-gutter);
	display: grid;
	grid-template-columns: clamp(0px, 14vw, 190px) minmax(0, 1fr);
	gap: 0;
}

.fk-spine__marker {
	font-family: var(--fk-mono);
	font-size: 12px;
	line-height: 1.9;
	color: var(--fk-text-40);
	padding-top: 6px;
	white-space: pre-line;
}

.fk-spine__content {
	min-width: 0;
}

.fk-section {
	padding-top: var(--fk-section-pad-top);
	padding-bottom: var(--fk-section-pad-bottom);
	border-top: 1px solid var(--fk-hairline-strong);
}

.fk-mono {
	font-family: var(--fk-mono);
}

.fk-chromatic {
	transition: text-shadow 180ms ease, color 160ms ease;
}

.fk-chromatic:hover,
.fk-chromatic:focus-visible {
	color: var(--fk-text);
	text-shadow: -3px 0 var(--fk-fringe-magenta), 3px 0 var(--fk-fringe-cyan);
}

.fk-chromatic--sm:hover,
.fk-chromatic--sm:focus-visible {
	text-shadow: -2px 0 var(--fk-fringe-magenta), 2px 0 var(--fk-fringe-cyan);
}

@keyframes fkIn {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fkScrub {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-487px);
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}