/* Shared styles for project pages (/<project>/).
   Each page sets its own palette on :root:
   --bg, --bg-deep, --accent, and optionally --ink. */

:root {
	--bg: rgb(65, 123, 202);
	--bg-deep: rgb(46, 96, 168);
	--accent: #ffd27a;
	--ink: rgba(255, 255, 255, 0.86);
	--ink-strong: rgba(255, 255, 255, 0.96);
	--ink-soft: rgba(255, 255, 255, 0.66);
	--ink-faint: rgba(255, 255, 255, 0.45);
	--rule: rgba(255, 255, 255, 0.2);
	--panel: rgba(0, 0, 0, 0.16);
	--panel-strong: rgba(0, 0, 0, 0.28);
	--serif: Georgia, "Times New Roman", serif;
	--sans: "Open Sans", system-ui, sans-serif;
	--mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink);
	background: var(--bg);
}

h1,
h2,
h3,
p,
ul,
ol,
pre,
figure {
	margin: 0;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

a {
	color: var(--ink-strong);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--rule);
}

a:hover {
	border-bottom-color: var(--ink-strong);
}

:focus-visible {
	outline: 3px solid rgba(255, 255, 255, 0.9);
	outline-offset: 3px;
}

code {
	font-family: var(--mono);
	font-size: 0.88em;
	padding: 0.1em 0.35em;
	border-radius: 4px;
	background: var(--panel);
}

em {
	font-family: var(--serif);
}

.page {
	width: min(100%, 60rem);
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* site bar: home, this project once its title scrolls away, sections, GitHub */

html {
	scroll-behavior: smooth;
}

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

.sitebar {
	position: sticky;
	top: 0;
	z-index: 10;
	background: var(--bg);
	border-bottom: 1px solid var(--rule);
}

.sitebar-in {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	width: min(100%, 60rem);
	margin: 0 auto;
	padding: 0 1.5rem;
}

.sitebar a {
	border: 0;
	color: var(--ink-soft);
}

.sitebar a:hover {
	color: var(--ink-strong);
}

.sitebar .where {
	flex: none;
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	white-space: nowrap;
}

.sitebar .home {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 1.05rem;
}

.sitebar .home .short {
	display: none;
}

.sitebar .here {
	font-family: var(--serif);
	color: var(--ink-strong);
	opacity: 0;
	transform: translateY(0.25rem);
	transition:
		opacity 0.2s,
		transform 0.2s;
}

.sitebar.past .here {
	opacity: 1;
	transform: none;
}

.sitebar .sections {
	position: relative;
	display: flex;
	flex: 1;
	min-width: 0;
	gap: 1.5rem;
	overflow-x: auto;
	scrollbar-width: none;
	white-space: nowrap;
	font-size: 0.9rem;
}

.sitebar .sections::-webkit-scrollbar {
	display: none;
}

.sitebar .sections a {
	display: block;
	padding: 0.85rem 0 0.75rem;
	border-bottom: 2px solid transparent;
}

.sitebar .sections a[aria-current] {
	color: var(--ink-strong);
	border-bottom-color: var(--accent);
}

.sitebar .gh {
	flex: none;
	display: flex;
	padding: 0.4rem;
	margin-right: -0.4rem;
}

.sitebar .gh svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

section[id] {
	scroll-margin-top: 3.1rem;
}

@media (max-width: 720px) {
	.sitebar-in {
		gap: 1rem;
		padding: 0 1rem;
	}

	.sitebar .home .full {
		display: none;
	}

	.sitebar .home .short {
		display: inline;
	}

	/* the project name takes no room until it shows */
	.sitebar .here {
		max-width: 0;
		overflow: hidden;
		transition:
			opacity 0.2s,
			transform 0.2s,
			max-width 0.2s;
	}

	.sitebar.past .here {
		max-width: 12rem;
	}

	.sitebar .where {
		gap: 0;
	}

	.sitebar.past .where {
		gap: 0.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sitebar .here {
		transition: none;
	}
}

/* hero */

.hero {
	padding: 3.5rem 0 3rem;
}

.eyebrow {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
}

.hero h1 {
	margin-top: 0.5rem;
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(3rem, 9vw, 5rem);
	line-height: 1;
	color: var(--ink-strong);
	letter-spacing: -0.01em;
}

.hero .tagline {
	margin-top: 1rem;
	max-width: 32em;
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(1.25rem, 3vw, 1.6rem);
	line-height: 1.35;
	color: var(--ink-strong);
}

.hero .lede {
	margin-top: 1.25rem;
	max-width: 38em;
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}

.button {
	display: inline-block;
	padding: 0.55rem 1.1rem;
	border: 1px solid var(--rule);
	border-radius: 999px;
	font-size: 0.95rem;
}

.button:hover {
	border-color: var(--ink-strong);
}

.button.primary {
	background: var(--ink-strong);
	border-color: var(--ink-strong);
	color: var(--bg-deep);
}

.button.primary:hover {
	background: #fff;
}

.meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.5rem;
	margin-top: 1.75rem;
	font-size: 0.9rem;
	color: var(--ink-soft);
}

/* sections */

section {
	padding: 3rem 0;
	border-top: 1px solid var(--rule);
}

section h2 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 1.85rem;
	line-height: 1.2;
	color: var(--ink-strong);
}

section h2 + p {
	margin-top: 0.75rem;
	max-width: 38em;
	color: var(--ink-soft);
}

section h3 {
	font-size: 1rem;
	font-weight: 600;
	color: var(--ink-strong);
}

/* code */

.code {
	margin-top: 1.5rem;
	padding: 1.1rem 1.25rem;
	overflow-x: auto;
	border-radius: 10px;
	background: var(--panel-strong);
	font-family: var(--mono);
	font-size: 0.85rem;
	line-height: 1.65;
	color: var(--ink-strong);
}

.code .c {
	color: var(--ink-faint);
}

.code .p {
	color: var(--accent);
	user-select: none;
}

/* feature grid */

.features {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: 1rem;
	margin-top: 2rem;
}

.features li {
	padding: 1.1rem 1.2rem 1.2rem;
	border-radius: 10px;
	background: var(--panel);
}

.features h3::before {
	content: "";
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	margin-right: 0.55rem;
	border-radius: 50%;
	background: var(--accent);
	vertical-align: 0.12em;
}

.features p {
	margin-top: 0.4rem;
	font-size: 0.93rem;
	line-height: 1.55;
	color: var(--ink-soft);
}

/* architecture diagram */

.arch {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: stretch;
	gap: 0.5rem;
	margin-top: 2rem;
}

.arch .box {
	padding: 1.2rem 1.3rem;
	border: 1px solid var(--rule);
	border-radius: 10px;
	background: var(--panel);
}

.arch .box h3 {
	font-family: var(--mono);
	font-size: 1rem;
}

.arch .box .sub {
	margin-top: 0.15rem;
	font-size: 0.85rem;
	color: var(--ink-faint);
}

.arch .box ul {
	margin-top: 0.9rem;
	font-size: 0.9rem;
	line-height: 1.75;
}

.arch .box li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.arch .port {
	font-family: var(--mono);
	font-size: 0.82rem;
	color: var(--accent);
	white-space: nowrap;
}

.arch .link {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.3rem;
	padding: 0 0.5rem;
	font-family: var(--mono);
	font-size: 0.78rem;
	color: var(--ink-soft);
	text-align: center;
}

.arch .link .arrow {
	font-family: var(--sans);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--accent);
}

.arch-note {
	margin-top: 1rem;
	font-size: 0.9rem;
	color: var(--ink-soft);
}

/* screenshot */

.shot {
	margin: 2rem 0 0;
}

.shot a {
	display: block;
	border: 0;
}

.shot img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
	box-shadow:
		0 0 0 1px var(--rule),
		0 18px 40px rgba(0, 0, 0, 0.35);
}

.shot figcaption {
	margin-top: 0.85rem;
	font-size: 0.9rem;
	color: var(--ink-soft);
}

/* docs list */

.doclist {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 0.25rem 2rem;
	margin-top: 1.5rem;
}

.doclist li {
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--rule);
}

.doclist a {
	border: 0;
}

.doclist span {
	display: block;
	font-size: 0.88rem;
	color: var(--ink-soft);
}

/* release timeline */

.timeline {
	margin-top: 1.75rem;
}

.timeline li {
	display: grid;
	grid-template-columns: 7rem 1fr;
	gap: 1rem;
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--rule);
}

.timeline .ver {
	font-family: var(--mono);
	font-size: 0.95rem;
	color: var(--accent);
}

.timeline time {
	display: block;
	font-family: var(--sans);
	font-size: 0.8rem;
	color: var(--ink-faint);
}

.timeline h3 + p {
	margin-top: 0.2rem;
	font-size: 0.93rem;
	color: var(--ink-soft);
}

/* footer */

.footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding: 2rem 0 3rem;
	border-top: 1px solid var(--rule);
	font-size: 0.9rem;
	color: var(--ink-faint);
}

.footer a {
	color: var(--ink-soft);
	font-weight: 400;
	border: 0;
}

.footer a:hover {
	color: var(--ink-strong);
}

@media (max-width: 720px) {
	body {
		font-size: 16px;
	}

	.page {
		padding: 0 1rem;
	}

	.hero {
		padding: 2rem 0 2.5rem;
	}

	section {
		padding: 2.5rem 0;
	}

	.arch {
		grid-template-columns: 1fr;
	}

	.arch .link {
		flex-direction: row;
		padding: 0.25rem 0;
	}

	.arch .link .arrow {
		transform: rotate(90deg);
	}

	.timeline li {
		grid-template-columns: 1fr;
		gap: 0.2rem;
	}

	.timeline time {
		display: inline;
		margin-left: 0.5rem;
	}
}