/* Theme follows the OS unless <html data-theme="light|dark"> is set by the toggle. */
:root {
	color-scheme: light;
	--bg: #f5f5f5;
	--fg: #1a1a1a;
	/* Logo art is black fill + white outline (built for dark), so light theme inverts it. */
	--logo-filter: invert(1);
	--show-if-light: block;
	--show-if-dark: none;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		color-scheme: dark;
		--bg: #0d0d0d;
		--fg: #e0e0e0;
		--logo-filter: none;
		--show-if-light: none;
		--show-if-dark: block;
	}
}

:root[data-theme='dark'] {
	color-scheme: dark;
	--bg: #0d0d0d;
	--fg: #e0e0e0;
	--logo-filter: none;
	--show-if-light: none;
	--show-if-dark: block;
}

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

@font-face {
	font-family: 'Orbitron';
	src:
		url('fonts/orbitron-light-webfont.woff') format('woff'),
		url('fonts/orbitron-light-webfont.ttf') format('truetype');
	font-weight: 300;
	font-display: swap;
}

body {
	background: var(--bg);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

main {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* Logo + tagline scale as one unit with the window. The width knob: share of the
   window width, capped by height (logo is ~6.5:1) so short wide windows still fit. */
.brand {
	width: min(80vw, 140vh);
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3cqi;
	/* The brand is a picture, not copy: no drag-select, no select-all. Prefix for older Safari. */
	-webkit-user-select: none;
	user-select: none;
}

.logo {
	width: 100%;
	height: auto;
	filter: var(--logo-filter);
}

.tagline {
	font-family: 'Orbitron', sans-serif;
	font-weight: 300;
	/* Proportional to the logo; the rem floor keeps it readable on phones and lets browser zoom enlarge it. */
	font-size: max(0.75rem, 2.4cqi);
	color: var(--fg);
	letter-spacing: 0.35em;
	margin-right: -0.35em; /* cancel trailing letter-spacing so the text centres under the logo */
	text-transform: uppercase;
}

/* Navbar: transparent and fixed over the page, so the brand stays centred in the window.
   Links on the left, theme toggle on the right. */
.navbar {
	position: fixed;
	inset: 0 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 16px;
}

/* Text button: the site's borderless button. The same look on <a href> (navigation, mailto:) and
   <button> (actions); pick the element by what it does. The underline is always drawn but
   transparent at rest, so its colour can fade in on hover and keyboard focus. */
.text-button {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 4px;
	background: none;
	border: 0;
	color: var(--fg);
	font-family: 'Orbitron', sans-serif;
	font-weight: 300;
	font-size: 0.875rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: underline 1px transparent;
	text-underline-offset: 0.5em;
	opacity: 0.6;
	transition:
		opacity 0.2s,
		text-decoration-color 0.2s;
}

.text-button:hover,
.text-button:focus-visible {
	opacity: 1;
	text-decoration-color: currentColor;
}

/* The underline is the focus indicator. */
.text-button:focus-visible {
	outline: none;
}

/* Theme toggle */
.toggle {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	background: none;
	border: 1px solid var(--fg);
	border-radius: 50%;
	color: var(--fg);
	opacity: 0.6;
	transition: opacity 0.2s;
}

.toggle:hover,
.toggle:focus-visible {
	opacity: 1;
}

.toggle:focus-visible {
	outline: 2px solid var(--fg);
	outline-offset: 3px;
}

.toggle svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Show the theme you'd switch to. */
.toggle .moon {
	display: var(--show-if-light);
}

.toggle .sun {
	display: var(--show-if-dark);
}

/* Portal: the molecule menu (public/portal/). Sizes are SVG user units, so it all scales with the
   viewBox; the width knob keeps it inside phones and short windows. */
.molecule {
	width: min(92vw, 80vh, 560px);
	-webkit-user-select: none;
	user-select: none;
}

.molecule svg {
	display: block;
	width: 100%;
	height: auto;
}

.bond {
	stroke: var(--fg);
	stroke-width: 1.5;
	opacity: 0.35;
}

.atom circle {
	fill: var(--bg);
	stroke: var(--fg);
	stroke-width: 1.5;
	transition: stroke-width 0.2s;
}

.atom text {
	fill: var(--fg);
	font-family: 'Orbitron', sans-serif;
	font-weight: 300;
	text-anchor: middle;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.atom .symbol {
	font-size: 16px;
	text-transform: none;
	dominant-baseline: central;
}

.atom.hub .symbol {
	font-size: 26px;
}

.atom .name {
	font-size: 14px;
}

.atom .note {
	font-size: 9px;
	opacity: 0.7;
}

/* Dim the ink only: the circle's fill stays opaque so the bonds still stop at its rim. */
.atom.soon circle {
	stroke-opacity: 0.45;
}

.atom.soon text {
	fill-opacity: 0.45;
}

/* A thicker rim marks hover; keyboard focus adds a dashed rim, as the outline doesn't follow the circle. */
a.atom {
	outline: none;
}

a.atom:hover circle,
a.atom:focus-visible circle {
	stroke-width: 3;
}

a.atom:focus-visible circle {
	stroke-dasharray: 5 3;
}

/* Blog: plain reading column. */
.prose {
	width: min(90vw, 40rem);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
	color: var(--fg);
}

.prose h1 {
	font-family: 'Orbitron', sans-serif;
	font-weight: 300;
	font-size: 2rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.prose p {
	line-height: 1.6;
}

/* Cursor overlay (see main.js) */
.cursor {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	pointer-events: none;
	z-index: 2147483647;
	will-change: transform;
}

.cursor svg {
	display: block;
	width: 32px;
	height: 32px;
	animation: spin 1.2s linear infinite; /* one full turn per 1.2s; lower = faster */
}

/* Theme colours beat whatever an editor writes into the file (incl. inline styles).
   Filled with the page background so the outline stays legible over content. */
.cursor svg * {
	fill: var(--bg) !important;
	stroke: var(--fg) !important;
}

@keyframes spin {
	to {
		rotate: -360deg;
	}
}

/* Particle overlay, created by main.js on the first button or link click; sits just under the cursor. */
.particles {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 2147483646;
}

html.custom-cursor .cursor {
	display: block;
}

html.custom-cursor,
html.custom-cursor *,
html.custom-cursor *::before,
html.custom-cursor *::after {
	cursor: none !important;
}