:root {
	--paper: #eaeefa;
	--paper-raised: #f6f8fd;
	--ink: #141f3b;
	--ink-soft: #5b6c91;

	--sonic: #2a4fd0;
	--knuckles: #c8102e;
	--tails: #f2b01e;

	--font-display: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
	--font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

	--ease-out: cubic-bezier(0.25, 1, 0.5, 1);
}

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

body {
	margin: 0;
	padding: 3.5rem 1.5rem 6rem;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.6;
}

.shell {
	max-width: 38rem;
	margin-inline: auto;
}

h1 {
	margin: 0;
	font-family: var(--font-display);
	font-size: 2.75rem;
	font-weight: 600;
	font-variant: small-caps;
	letter-spacing: 0.02em;
	line-height: 1.1;
}

.loop {
	display: block;
	width: 100%;
	max-width: 20rem;
	height: auto;
	margin: 0.25rem 0 1rem;
}

.lede {
	margin: 0.75rem 0 2rem;
	color: var(--ink-soft);
}

.branch {
	--mark: var(--sonic);
	margin-top: 2.5rem;
}

.branch:nth-of-type(2) {
	--mark: var(--knuckles);
}

.branch:nth-of-type(3) {
	--mark: var(--tails);
}

.branch-head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 0.75rem;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.icon {
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
}

/* Flat-top honeycomb: each tile steps 3/4 of its width across and alternates half a tile down. */
.nodes {
	--w: min(11rem, calc((100vw - 3rem) / 2.55));
	--gap: 0.7rem;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: flex-start;
}

.nodes li {
	flex: none;
	margin-right: calc(var(--w) * -0.25 + var(--gap) * 0.866);
}

.nodes li:last-child {
	margin-right: 0;
}

.nodes li:nth-child(even) {
	margin-top: calc(var(--w) * 0.433 + var(--gap) * 0.5);
}

.node {
	--hex: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.15rem;
	width: var(--w);
	height: calc(var(--w) * 0.866);
	padding: 0 calc(var(--w) * 0.14);
	background: var(--mark);
	clip-path: var(--hex);
	color: var(--ink);
	text-align: center;
	text-decoration: none;
	transition: transform 0.2s var(--ease-out);
}

.node::before {
	content: "";
	position: absolute;
	inset: 3px;
	z-index: -1;
	background: var(--paper-raised);
	clip-path: var(--hex);
	transition: background-color 0.2s var(--ease-out);
}

a.node:hover,
a.node:focus-visible {
	transform: translateY(-3px);
	outline: none;
}

a.node:hover::before,
a.node:focus-visible::before {
	background: color-mix(in srgb, var(--mark) 22%, var(--paper-raised));
}

.name {
	font-family: var(--font-display);
	font-size: clamp(0.8rem, calc(var(--w) * 0.105), 1.5rem);
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.host {
	font-family: var(--font-mono);
	font-size: clamp(0.5625rem, calc(var(--w) * 0.068), 0.95rem);
	color: var(--ink-soft);
	white-space: nowrap;
}

/* Seven flat-top hexes: the centre plus its six neighbours, placed by centre-to-centre distance. */
.flower {
	--w: min(14rem, calc((100vw - 3rem) / 2.6));
	--gap: 0.7rem;
	--h: calc(var(--w) * 0.866);
	--d: calc(var(--h) + var(--gap));
	--dx: calc(var(--d) * 0.866);
	--dy: calc(var(--d) * 0.5);
	position: relative;
	width: calc(var(--w) + 2 * var(--dx));
	height: calc(2 * var(--d) + var(--h));
	margin: 1rem auto 0;
}

.flower .node {
	position: absolute;
}

.projects {
	--mark: var(--sonic);
}

.writing {
	--mark: var(--knuckles);
}

.elsewhere {
	--mark: var(--tails);
}

.center {
	--mark: var(--ink);
	left: var(--dx);
	top: var(--d);
	color: var(--paper);
}

.center::before {
	background: var(--ink);
}

.center h1 {
	font-size: clamp(1.1rem, calc(var(--w) * 0.16), 2.3rem);
	line-height: 1.1;
}

.center .loop {
	width: 80%;
	margin: 0.1rem 0 0;
}

.center .loop path {
	stroke-width: 8;
}

.p0 { left: var(--dx); top: 0; }
.p1 { left: calc(2 * var(--dx)); top: calc(var(--d) - var(--dy)); }
.p2 { left: calc(2 * var(--dx)); top: calc(var(--d) + var(--dy)); }
.p3 { left: var(--dx); top: calc(2 * var(--d)); }
.p4 { left: 0; top: calc(var(--d) + var(--dy)); }
.p5 { left: 0; top: calc(var(--d) - var(--dy)); }

/* Labels sit in the free corners beside the tiles of their section. */
.label {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	width: var(--w);
	height: calc(var(--d) - var(--dy));
	margin: 0;
	font-family: var(--font-mono);
	font-size: clamp(0.5625rem, calc(var(--w) * 0.075), 1rem);
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.label .icon {
	width: clamp(1.5rem, calc(var(--w) * 0.2), 2.75rem);
	height: clamp(1.5rem, calc(var(--w) * 0.2), 2.75rem);
}

.label.projects {
	left: calc(2 * var(--dx));
	top: 0;
}

.label.writing {
	left: calc(2 * var(--dx));
	bottom: 0;
}

.label.elsewhere {
	left: 0;
	bottom: 0;
}

.back {
	margin-top: 3rem;
	font-family: var(--font-mono);
	font-size: 0.875rem;
}

.back a {
	color: var(--sonic);
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition-duration: 0.01ms !important;
	}
}