/* skubob.ai: the ig9labs.com template (graph paper, 12-column Swiss grid, Helvetica Neue,
   footer of copyright | icons), without Pico. Light by default; Dark and Auto on request. */

:root {
	color-scheme: light;
	--bg: #f5f4f0;
	--fg: #111111;
	--muted: #5c5c57;
	--grid: rgb(17 17 17 / 0.06);
	--accent: #c42f18;
	--sel: #e8e7e1;
	--sans: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
}

:root[data-theme='dark'] {
	color-scheme: dark;
	--bg: #121212;
	--fg: #ededea;
	--muted: #a3a39e;
	--grid: rgb(255 255 255 / 0.06);
	--accent: #ff6a4d;
	--sel: #222222;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		color-scheme: dark;
		--bg: #121212;
		--fg: #ededea;
		--muted: #a3a39e;
		--grid: rgb(255 255 255 / 0.06);
		--accent: #ff6a4d;
		--sel: #222222;
	}
}

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

/* Graph paper: 24px squares, anchored to the content's left edge so the 12 columns start on a line */
:root {
	--u: 24px;
	--pad: clamp(16px, 4vw, 48px);
	--c: 48px;
	--W: calc(12 * var(--c) + 11 * var(--u));
	background-color: var(--bg);
	background-image:
		linear-gradient(to right, var(--grid) 1px, transparent 1px),
		linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
	background-size: var(--u) var(--u);
	background-position: calc(50% + var(--u) / 2 - var(--W) / 2) 0;
}

@supports (width: round(down, 100vw, 1px)) {
	:root {
		--c: max(48px, round(down, calc((min(100vw, 1280px) - 2 * var(--pad) - 11 * var(--u)) / 12), var(--u)));
	}
}

@media (max-width: 959px) {
	:root {
		--W: calc(100vw - 2 * var(--pad));
	}

	@supports (width: round(down, 100vw, 1px)) {
		:root {
			--W: round(down, calc(100vw - 2 * var(--pad)), var(--u));
		}
	}
}

body {
	margin: 0;
	color: var(--fg);
	font-family: var(--sans);
}

.site {
	min-height: 100vh;
	min-height: 100svh;
	min-height: round(down, 100svh, 24px);
	display: grid;
	grid-template-rows: auto 1fr auto;
	font-size: 16px;
	line-height: var(--u);
}

.grid12 {
	display: grid;
	grid-template-columns: repeat(12, var(--c));
	column-gap: var(--u);
	width: var(--W);
	margin-inline: auto;
}

/* A merged block of squares: paints inside its outline, leaving the grid line on its edge */
.merge {
	background: linear-gradient(var(--merge, var(--bg)), var(--merge, var(--bg))) 1px 1px / calc(100% - 1px) calc(100% - 1px) no-repeat;
}

.site > header {
	padding-block: calc(2 * var(--u)) var(--u);
}

/* Home: the wordmark takes the headline's place, columns 1-8, sitting on the bottom lines */
.home {
	align-content: end;
	padding-block: calc(2 * var(--u));
}

.mark {
	grid-column: 1 / span 8;
	align-self: end;
	margin: 0;
	line-height: 0;
	color: var(--fg);
}

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

/* Footer: copyright | icons */
.site > footer {
	padding-bottom: calc(2 * var(--u));
	font-size: 13px;
	color: var(--muted);
}

.site > footer .copy {
	grid-column: 1 / span 4;
	margin: var(--u) 0 0;
	line-height: var(--u);
}

@supports (text-box: trim-both cap alphabetic) {
	.site > footer .copy {
		text-box: trim-both cap alphabetic;
		padding-top: calc(var(--u) - 1cap);
	}
}

.site > footer .mini {
	grid-column: 9 / span 4;
	display: flex;
	gap: var(--u);
	margin-top: var(--u);
}

/* Icon buttons: one square each; hovering fills the square */
.icon-btn {
	display: grid;
	place-items: center;
	width: var(--u);
	height: var(--u);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	color: var(--muted);
	font: inherit;
	cursor: pointer;
}

.icon-btn:hover {
	--merge: var(--sel);
	color: var(--fg);
}

.icon-btn:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}

.icon-btn svg {
	display: block;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

[hidden] {
	display: none !important;
}

/* Narrow screens: one column, width still a whole number of squares */
@media (max-width: 959px) {
	.grid12 {
		grid-template-columns: minmax(0, 1fr);
	}

	.mark,
	.site > footer .copy,
	.site > footer .mini {
		grid-column: 1 / -1;
	}
}