/* =========================================================
   Front page - boot sequence into an actual website
   Same cursed 1990s register as the coming soon page, but
   the content underneath is real, semantic and crawlable.
   Prefix: .fp-
   ========================================================= */

:root {
	--fp-bg:        #05020a;
	--fp-panel:     #0a0612;
	--fp-ink:       #d7ffd7;
	--fp-ink-dim:   #8fbe8f;
	--fp-lime:      #39ff14;
	--fp-acid:      #b6ff1a;
	--fp-magenta:   #ff00d4;
	--fp-cyan:      #00f0ff;
	--fp-yellow:    #ffee00;
	--fp-red:       #ff2b2b;
	--fp-win-gray:      #c0c0c0;
	--fp-win-gray-dark: #808080;
	--fp-win-blue:      #000080;
}

/* The main stylesheet forces white on body and decorates every heading.
   Shout back, but only inside .fp-body. */
html:has(body.fp-body),
body.fp-body {
	margin: 0;
	padding: 0;
	background-color: var(--fp-bg) !important;
	background-image: none !important;
	color: var(--fp-ink) !important;
	font-family: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', 'Courier New', monospace !important;
	font-size: 16px;
	line-height: 1.75;
	opacity: 1 !important;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}
body.fp-body * { box-sizing: border-box; }

body.fp-body :where(h1, h2, h3, h4, h5, h6) {
	overflow: visible;
	padding-bottom: 0;
	border-bottom: none;
	margin-left: 0;
}
body.fp-body :where(h1, h2, h3, h4, h5, h6)::before {
	content: none;
	background: none;
	position: static;
	width: auto;
	height: auto;
}
body.fp-body :where(p, li, td, th, dt, dd) {
	font-size: inherit;
	font-family: inherit;
	color: inherit;
}
body.fp-body :where(img) { max-width: 100%; height: auto; }

/* Hide theme chrome that leaks in */
.fp-body .menu-container,
.fp-body #masthead,
.fp-body .page-title-banner,
.fp-body #colophon,
.fp-body #loading-screen { display: none !important; }

.fp-body a { color: var(--fp-cyan); }
.fp-body a:hover,
.fp-body a:focus { color: var(--fp-yellow); }
::selection { background: var(--fp-magenta); color: #000; }

.fp-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- CRT overlays ---------- */
.fp-crt-scan,
.fp-crt-vignette,
.fp-crt-flicker {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9000;
}
.fp-crt-scan {
	background: repeating-linear-gradient(
		to bottom,
		rgba(0,0,0,0.32) 0px, rgba(0,0,0,0.32) 1px,
		rgba(0,0,0,0) 1px,  rgba(0,0,0,0) 3px
	);
	mix-blend-mode: multiply;
	opacity: 0.55;
}
.fp-crt-vignette {
	background: radial-gradient(ellipse at center, rgba(0,0,0,0) 42%, rgba(0,0,0,0.8) 100%);
}
.fp-crt-flicker {
	background: rgba(120,255,160,0.03);
	animation: fp-flicker 5s steps(2) infinite;
}
@keyframes fp-flicker {
	0%, 92%, 100% { opacity: 0.25; }
	93% { opacity: 0.9; }
	96% { opacity: 0.1; }
}

.fp-tear {
	position: fixed; left: 0; width: 100%; height: 2px;
	background: var(--fp-lime); opacity: 0.18;
	pointer-events: none; z-index: 9001;
	animation: fp-tear 9s linear infinite;
}
.fp-tear.t2 { background: var(--fp-magenta); height: 3px; animation-duration: 7.3s; animation-delay: -3s; }
.fp-tear.t3 { background: var(--fp-cyan); animation-duration: 13.1s; animation-delay: -5s; }
@keyframes fp-tear {
	0%   { top: -2%; opacity: 0; }
	4%   { opacity: 0.22; }
	96%  { opacity: 0.22; }
	100% { top: 102%; opacity: 0; }
}

/* ---------- Shell ---------- */
.fp-shell {
	position: relative;
	z-index: 1;
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 20px 140px;
}

.fp-topbar {
	position: sticky;
	top: 0;
	z-index: 500;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	background: rgba(5,2,10,0.92);
	backdrop-filter: blur(2px);
	font-family: 'VT323', 'Courier New', monospace;
	font-size: 19px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fp-lime);
	padding: 10px 0;
	border-bottom: 1px solid rgba(57,255,20,0.25);
}
.fp-topbar a { color: var(--fp-lime); text-decoration: none; }
.fp-topbar a:hover { color: var(--fp-yellow); }
.fp-topbar nav { display: flex; gap: 18px; flex-wrap: wrap; }
.fp-topbar .blink { animation: fp-blink 1.1s steps(2) infinite; }
@keyframes fp-blink { 50% { opacity: 0; } }

/* ---------- Boot hero ---------- */
.fp-hero {
	min-height: calc(100vh - 60px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 40px 0 30px;
	position: relative;
}

.fp-logo-wrap {
	position: relative;
	width: min(92vw, 1000px);
	padding: clamp(10px, 2vw, 24px) 0;
	filter: drop-shadow(0 0 22px rgba(57,255,20,0.3));
}
.fp-logo-stack {
	position: relative;
	display: grid;
	place-items: center;
}

/* The wordmark SVG is solid black, so each channel gets colour-matrixed
   into neon via filter rather than fill. Same trick as the boot screen. */
.fp-logo {
	display: block;
	width: 100%;
	height: auto;
	grid-area: 1 / 1 / 2 / 2;
	mix-blend-mode: screen;
	filter: brightness(0) saturate(100%) invert(1);
}
.fp-logo.ch-r {
	filter: brightness(0) saturate(100%)
	        invert(35%) sepia(90%) saturate(5000%) hue-rotate(305deg) brightness(110%) contrast(120%);
	transform: translate(-4px, 1px);
	animation: fp-ch-r 2.6s steps(3) infinite;
	opacity: 0.95;
}
.fp-logo.ch-g {
	filter: brightness(0) saturate(100%) invert(1);
	animation: fp-ch-g 2.6s steps(3) infinite;
}
.fp-logo.ch-b {
	filter: brightness(0) saturate(100%)
	        invert(60%) sepia(95%) saturate(1500%) hue-rotate(155deg) brightness(110%) contrast(120%);
	transform: translate(4px, -1px);
	animation: fp-ch-b 2.6s steps(3) infinite;
	opacity: 0.95;
}
@keyframes fp-ch-r {
	0%, 96%  { transform: translate(-4px, 1px); }
	96.5%    { transform: translate(-14px, 3px) skewX(-8deg); }
	98%      { transform: translate(8px, -2px) skewX(6deg); }
	100%     { transform: translate(-4px, 1px); }
}
@keyframes fp-ch-g {
	0%, 96%  { transform: translate(0, 0); }
	96.5%    { transform: translate(2px, 2px) skewX(4deg); }
	98%      { transform: translate(-3px, -1px) skewX(-3deg); }
	100%     { transform: translate(0, 0); }
}
@keyframes fp-ch-b {
	0%, 96%  { transform: translate(4px, -1px); }
	96.5%    { transform: translate(12px, -3px) skewX(7deg); }
	98%      { transform: translate(-7px, 2px) skewX(-5deg); }
	100%     { transform: translate(4px, -1px); }
}

.fp-h1 {
	margin: 18px 0 0;
	font-family: 'Helvetica Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 900;
	font-size: clamp(22px, 3.4vw, 40px);
	line-height: 1.05;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 2px 0 0 rgba(255,0,212,0.8), -2px 0 0 rgba(0,240,255,0.8);
	max-width: 22ch;
}

.fp-lede {
	max-width: 60ch;
	margin: 18px 0 0;
	font-size: 18px;
	color: var(--fp-ink);
}

.fp-hero-terminal {
	margin: 26px 0 0;
	border: 1px solid var(--fp-lime);
	background: rgba(0,0,0,0.55);
	box-shadow: inset 0 0 22px rgba(57,255,20,0.18);
	font-family: 'VT323', 'Courier New', monospace;
	font-size: 18px;
	color: var(--fp-lime);
	max-width: 560px;
}
.fp-hero-terminal .bar {
	display: flex; justify-content: space-between;
	padding: 2px 8px;
	background: var(--fp-lime); color: #04120a;
	letter-spacing: 0.08em;
}
.fp-hero-terminal .log { padding: 10px 12px; min-height: 8.4em; }
.fp-hero-terminal .log .line { opacity: 0; }
.fp-hero-terminal .log .line.on { opacity: 1; }
.fp-hero-terminal .log .ok { color: var(--fp-acid); }
.fp-hero-terminal .log .warn { color: var(--fp-yellow); }
.fp-hero-terminal .prompt { padding: 0 12px 10px; }
.fp-hero-terminal .prompt::after { content: '_'; animation: fp-blink 1s steps(2) infinite; }

.fp-scroll-cue {
	margin: 26px 0 0;
	font-family: 'VT323', 'Courier New', monospace;
	font-size: 20px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fp-acid);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.fp-scroll-cue::after { content: '\25BC'; animation: fp-bounce 1.4s steps(3) infinite; }
.fp-scroll-cue:hover { color: var(--fp-yellow); }
@keyframes fp-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(5px); }
}

/* ---------- Section furniture ---------- */
.fp-section { padding: 70px 0 0; }

.fp-kicker {
	font-family: 'VT323', 'Courier New', monospace;
	font-size: 20px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fp-acid);
	margin: 0 0 8px;
}

.fp-h2 {
	margin: 0 0 18px;
	font-family: 'Helvetica Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 900;
	font-size: clamp(26px, 4.6vw, 52px);
	line-height: 1;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 2px 0 0 rgba(255,0,212,0.6), -2px 0 0 rgba(0,240,255,0.6);
}

.fp-body-copy { max-width: 66ch; }
.fp-body-copy p { margin: 0 0 18px; }
.fp-body-copy strong { color: #fff; }

/* ---------- Defrag bar divider ---------- */
.fp-defrag {
	display: grid;
	grid-template-columns: repeat(auto-fill, 12px);
	gap: 2px;
	margin: 34px 0 0;
	border: 1px solid var(--fp-win-gray-dark);
	padding: 4px;
	background: #000;
}
.fp-defrag i {
	display: block;
	height: 10px;
	background: var(--fp-win-blue);
}
.fp-defrag i.b { background: var(--fp-lime); }
.fp-defrag i.c { background: var(--fp-magenta); }
.fp-defrag i.d { background: var(--fp-win-gray-dark); }

/* ---------- What I do ---------- */
.fp-do {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 16px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}
.fp-do li {
	border: 1px solid rgba(57,255,20,0.32);
	background: rgba(0,0,0,0.4);
	padding: 18px;
	margin: 0;
}
.fp-do li::before { content: none; }
.fp-do .n {
	font-family: 'VT323', 'Courier New', monospace;
	font-size: 18px;
	letter-spacing: 0.1em;
	color: var(--fp-lime);
	display: block;
}
.fp-do h3 {
	margin: 4px 0 6px;
	font-family: 'Helvetica Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 900;
	font-size: 19px;
	text-transform: uppercase;
	color: #fff;
}
.fp-do p { margin: 0; font-size: 15px; color: var(--fp-ink-dim); }

/* ---------- Windows ---------- */
.fp-window {
	margin: 26px 0 0;
	background: var(--fp-panel);
	border: 2px solid var(--fp-win-gray);
	border-right-color: var(--fp-win-gray-dark);
	border-bottom-color: var(--fp-win-gray-dark);
	box-shadow: 0 0 0 1px #000, 6px 6px 0 rgba(0,0,0,0.75);
}
.fp-window > .title {
	display: flex; justify-content: space-between; align-items: center; gap: 10px;
	padding: 3px 4px 3px 8px;
	background: linear-gradient(90deg, var(--fp-win-blue), #1084d0);
	color: #fff;
	font-family: 'VT323', 'Courier New', monospace;
	font-size: 19px;
	letter-spacing: 0.05em;
}
.fp-window > .title.danger { background: linear-gradient(90deg, #aa0000, #ff4400); }
.fp-window > .title .btns { display: inline-flex; gap: 2px; }
.fp-window > .title .btn {
	width: 20px; height: 18px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--fp-win-gray); color: #000;
	border: 1px solid #fff;
	border-right-color: #000; border-bottom-color: #000;
	font-family: inherit; font-size: 15px; line-height: 1;
	cursor: pointer;
}
.fp-window > .title .btn:active { border-color: #000 #fff #fff #000; }
.fp-window > .inner { padding: 22px clamp(16px, 3vw, 30px) 26px; }

/* ---------- Services grid ---------- */
.fp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
}
.fp-card {
	display: block;
	padding: 20px;
	border: 1px solid rgba(57,255,20,0.35);
	background: rgba(0,0,0,0.4);
	text-decoration: none;
	color: var(--fp-ink);
	transition: transform 0.12s steps(2), border-color 0.12s;
}
.fp-card:hover {
	border-color: var(--fp-magenta);
	transform: translate(-2px,-2px);
	color: var(--fp-ink);
}
.fp-card .k {
	display: block;
	font-family: 'VT323', 'Courier New', monospace;
	font-size: 18px; letter-spacing: 0.1em;
	color: var(--fp-lime); text-transform: uppercase;
}
.fp-card h3 {
	margin: 6px 0 8px;
	font-family: 'Helvetica Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 900; font-size: 20px;
	text-transform: uppercase; color: #fff;
}
.fp-card p { margin: 0; font-size: 15px; color: var(--fp-ink-dim); }

/* ---------- Directory listing ---------- */
.fp-dir {
	font-family: 'VT323', 'Courier New', monospace;
	font-size: 19px;
	line-height: 1.5;
	color: var(--fp-lime);
	margin: 0;
}
.fp-dir .head,
.fp-dir .foot { color: var(--fp-ink-dim); }
.fp-dir ol {
	list-style: none;
	margin: 10px 0;
	padding: 0;
	max-height: 22em;
	overflow-y: auto;
	border-top: 1px dashed rgba(57,255,20,0.3);
	border-bottom: 1px dashed rgba(57,255,20,0.3);
	scrollbar-width: thin;
	scrollbar-color: var(--fp-lime) #000;
}
.fp-dir ol li {
	margin: 0;
	padding: 1px 6px;
	display: flex;
	gap: 14px;
	align-items: baseline;
}
.fp-dir ol li::before { content: none; }
.fp-dir ol li:hover { background: var(--fp-lime); color: #04120a; }
.fp-dir ol li:hover a { color: #04120a; }
.fp-dir .name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-dir .name a { color: inherit; text-decoration: none; }
.fp-dir .name a:hover { text-decoration: underline; }
.fp-dir .ext { flex: none; color: var(--fp-cyan); }
.fp-dir ol li:hover .ext { color: #04120a; }
.fp-dir .yr { flex: none; color: var(--fp-ink-dim); }
.fp-dir ol li:hover .yr { color: #04120a; }

/* ---------- Contact ---------- */
.fp-contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	margin: 22px 0 0;
}
.fp-slots {
	border: 1px solid var(--fp-magenta);
	background: rgba(255,0,212,0.07);
	padding: 20px;
	text-align: center;
}
.fp-slots .label {
	display: block;
	font-family: 'VT323', 'Courier New', monospace;
	font-size: 19px; letter-spacing: 0.12em;
	text-transform: uppercase; color: var(--fp-magenta);
}
.fp-slots .big {
	display: block;
	margin: 4px 0 2px;
	font-family: 'Helvetica Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 900;
	font-size: clamp(30px, 5vw, 48px);
	line-height: 1; color: #fff;
	text-shadow: 2px 0 0 rgba(255,0,212,0.7), -2px 0 0 rgba(0,240,255,0.7);
}
.fp-slots .note { display: block; font-size: 14px; color: var(--fp-ink-dim); }

.fp-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 0; }
.fp-btn {
	display: inline-block;
	padding: 8px 22px;
	background: var(--fp-win-gray); color: #000;
	text-decoration: none;
	border: 2px solid #fff;
	border-right-color: #000; border-bottom-color: #000;
	font-family: 'VT323', 'Courier New', monospace;
	font-size: 21px; letter-spacing: 0.04em;
}
.fp-btn:hover { background: #d8d8d8; color: #000; }
.fp-btn:active { border-color: #000 #fff #fff #000; }

/* ---------- Footer ---------- */
.fp-footer {
	display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
	margin: 70px 0 0; padding: 14px 0 0;
	border-top: 1px solid rgba(57,255,20,0.25);
	font-family: 'VT323', 'Courier New', monospace;
	font-size: 19px; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--fp-ink-dim);
}
.fp-footer a { color: var(--fp-lime); text-decoration: none; }
.fp-footer a:hover { color: var(--fp-yellow); }

/* ---------- Marquee ---------- */
.fp-marquee {
	position: fixed; left: 0; right: 0; bottom: 0;
	z-index: 8000; overflow: hidden;
	background: #000;
	border-top: 1px solid var(--fp-magenta);
	font-family: 'VT323', 'Courier New', monospace;
	font-size: 18px; letter-spacing: 0.1em;
	color: var(--fp-magenta);
	white-space: nowrap; padding: 2px 0;
}
.fp-marquee-track { display: inline-block; padding-left: 100%; animation: fp-marquee 30s linear infinite; }
.fp-marquee-track span::after { content: ' /// '; color: var(--fp-lime); }
@keyframes fp-marquee {
	0% { transform: translateX(0); }
	100% { transform: translateX(-100%); }
}

/* ---------- The easter egg dialog ---------- */
.fp-dialog {
	position: fixed;
	z-index: 9500;
	width: min(400px, 88vw);
	background: var(--fp-win-gray);
	color: #000;
	border: 2px solid #fff;
	border-right-color: #000; border-bottom-color: #000;
	box-shadow: 0 0 0 1px #000, 8px 8px 0 rgba(0,0,0,0.6);
	font-family: 'VT323', 'Courier New', monospace;
	font-size: 20px;
	bottom: 40px; right: 24px;
}
.fp-dialog[hidden] { display: none !important; }
.fp-dialog .title {
	display: flex; justify-content: space-between; align-items: center;
	padding: 3px 4px 3px 8px;
	background: linear-gradient(90deg, #aa0000, #ff4400);
	color: #fff; letter-spacing: 0.05em;
}
.fp-dialog .title .btn {
	width: 20px; height: 18px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--fp-win-gray); color: #000;
	border: 1px solid #fff; border-right-color: #000; border-bottom-color: #000;
	font-size: 15px; line-height: 1; cursor: pointer;
}
.fp-dialog .body { display: flex; gap: 14px; padding: 16px; align-items: flex-start; line-height: 1.3; }
.fp-dialog .icon {
	flex: none; width: 32px; height: 32px;
	display: flex; align-items: center; justify-content: center;
	background: var(--fp-red); color: #fff;
	border-radius: 50%; font-weight: 700;
}
.fp-dialog .msg strong { display: block; font-size: 22px; margin-bottom: 4px; }
.fp-dialog .actions { display: flex; gap: 10px; padding: 0 16px 16px; flex-wrap: wrap; }
.fp-dialog .actions button {
	padding: 4px 18px;
	background: var(--fp-win-gray); color: #000;
	border: 2px solid #fff; border-right-color: #000; border-bottom-color: #000;
	font-family: inherit; font-size: 19px; cursor: pointer;
}
.fp-dialog .actions button:active { border-color: #000 #fff #fff #000; }

/* Screen shudder when you press the wrong button */
body.fp-shudder { animation: fp-shudder 0.4s steps(4) 1; }
@keyframes fp-shudder {
	0%, 100% { transform: translate(0,0); }
	25% { transform: translate(-6px, 3px); }
	50% { transform: translate(5px, -4px); }
	75% { transform: translate(-3px, -2px); }
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
	body.fp-body { font-size: 15px; }
	.fp-hero { min-height: auto; padding: 30px 0 20px; }
	.fp-topbar { font-size: 16px; }
	.fp-topbar nav { gap: 12px; }
	.fp-window > .inner { padding: 18px 14px 22px; }
	.fp-dir { font-size: 17px; }
	.fp-dir .yr { display: none; }
	.fp-dialog { right: 12px; left: 12px; width: auto; bottom: 34px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.fp-crt-flicker, .fp-tear, .fp-marquee-track,
	.fp-logo.ch-r, .fp-logo.ch-b,
	.fp-hero-terminal .prompt::after,
	.fp-scroll-cue::after, .fp-topbar .blink {
		animation: none !important;
	}
	.fp-logo.ch-r, .fp-logo.ch-b { opacity: 0; }
	.fp-logo.ch-g { animation: none !important; }
	.fp-hero-terminal .log .line { opacity: 1 !important; }
	body.fp-shudder { animation: none !important; }
}

/* ---------- Print ---------- */
@media print {
	.fp-crt-scan, .fp-crt-vignette, .fp-crt-flicker,
	.fp-tear, .fp-marquee, .fp-dialog, .fp-hero-terminal,
	.fp-defrag { display: none !important; }
	body.fp-body { background: #fff; color: #000; }
	.fp-h1, .fp-h2 { color: #000; text-shadow: none; }
	.fp-dir ol { max-height: none; overflow: visible; }
}