/* Marcin Szyc - business card. Plain modern CSS, no build step. */

:root {
	color-scheme: dark light;

	/* dark is the default look */
	--bg: #080d12;
	--bg-glow-a: #12303a;
	--bg-glow-b: #0a1620;
	--tile: #0f1a22;
	--tile-hover: #132330;
	--line: #1e3340;
	--line-hover: #2f5566;
	--text: #e9f1f4;
	--text-soft: #9db0bb;
	--text-faint: #67808d;
	--accent: #5eead4;
	--accent-soft: #2c5364;
	--chip: #16262f;

	--radius: 20px;
	--gap: 14px;
	--pad: clamp(20px, 3vw, 32px);

	--font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: light) {
	:root {
		--bg: #f4f6f7;
		--bg-glow-a: #dfeaed;
		--bg-glow-b: #eef2f3;
		--tile: #ffffff;
		--tile-hover: #ffffff;
		--line: #e0e6e9;
		--line-hover: #b9ccd3;
		--text: #0f2027;
		--text-soft: #4d6470;
		--text-faint: #7b8f99;
		--accent: #0f766e;
		--accent-soft: #2c5364;
		--chip: #eef3f4;
	}
}

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

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

body {
	min-height: 100svh;
	display: grid;
	place-items: center;
	padding: clamp(16px, 4vw, 48px);
	font-family: var(--font);
	color: var(--text);
	background-color: var(--bg);
	background-image:
		radial-gradient(60rem 40rem at 12% -10%, var(--bg-glow-a), transparent 60%),
		radial-gradient(50rem 40rem at 105% 110%, var(--bg-glow-b), transparent 60%);
	background-attachment: fixed;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

/* ── Bento grid ───────────────────────────────────────────── */

.grid {
	width: min(100%, 1080px);
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--gap);
}

.tile {
	position: relative;
	overflow: hidden;
	padding: var(--pad);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--tile);
	transition: border-color .35s ease, background-color .35s ease, transform .35s ease;

	/* pointer-tracked spotlight, coordinates set in js/main.js */
	&::before {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		opacity: 0;
		transition: opacity .35s ease;
		background: radial-gradient(18rem 18rem at var(--mx, 50%) var(--my, 50%),
				color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
	}

	&:hover {
		border-color: var(--line-hover);
		background: var(--tile-hover);

		&::before {
			opacity: 1;
		}
	}
}

.tile--photo {
	grid-column: span 2;
	grid-row: span 2;
	padding: 0;
	min-height: 280px;
}

.tile--intro {
	grid-column: span 4;
}

.tile--now {
	grid-column: span 4;
}

.tile--stack {
	grid-column: span 4;
}

.tile--links {
	grid-column: span 2;
}

@media (width < 860px) {
	.grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.tile--photo {
		grid-column: span 2;
		grid-row: span 1;
		aspect-ratio: 5 / 4;
		min-height: 0;
	}

	.tile--intro,
	.tile--now,
	.tile--stack,
	.tile--links {
		grid-column: span 2;
	}
}

/* ── Photo ────────────────────────────────────────────────── */

.tile--photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	display: block;
	filter: saturate(.95);
	transition: transform .6s cubic-bezier(.2, .7, .3, 1), filter .6s ease;
}

.tile--photo:hover img {
	transform: scale(1.035);
	filter: saturate(1.05);
}

@media (width < 860px) {
	/* landscape crop of a portrait shot - hold the face in frame */
	.tile--photo img {
		object-position: center 22%;
	}
}

/* ── Intro ────────────────────────────────────────────────── */

.tile--intro {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

h1 {
	font-size: clamp(2.4rem, 6vw, 4rem);
	font-weight: 600;
	letter-spacing: -.035em;
	line-height: 1.05;
}

.title {
	margin-top: .4rem;
	font-size: clamp(1rem, 2vw, 1.25rem);
	color: var(--accent);
	letter-spacing: -.01em;
}

.meta {
	margin-top: .5rem;
	font-size: .95rem;
	color: var(--text-faint);
}

/* ── Section labels ───────────────────────────────────────── */

.label {
	margin-bottom: 1rem;
	font-family: var(--font-mono);
	font-size: .72rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--text-faint);
}

/* ── Currently ────────────────────────────────────────────── */

.lead {
	font-size: clamp(1rem, 1.6vw, 1.12rem);
	color: var(--text-soft);
	text-wrap: pretty;
	max-width: 62ch;
}

.lead strong {
	font-weight: 600;
	color: var(--text);
}

.facts {
	/* auto-fit keeps the four figures in even columns: 4 across when there is
	   room, a tidy 2x2 when there is not, instead of a ragged 3+1 wrap */
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
	gap: 1.4rem 1.5rem;
	margin-top: 1.5rem;
	padding-top: 1.3rem;
	border-top: 1px solid var(--line);
	list-style: none;
	font-size: .82rem;
	line-height: 1.35;
	color: var(--text-faint);
}

.facts li {
	max-width: 16ch;
}

.figure {
	display: block;
	font-size: 1.8rem;
	font-weight: 600;
	letter-spacing: -.03em;
	color: var(--text);
}

.unit {
	margin-left: .1em;
	font-size: .95rem;
	font-weight: 500;
	color: var(--accent);
}

/* ── Stack ────────────────────────────────────────────────── */

.stack {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 1.4rem;
}

.group dt {
	margin-bottom: .6rem;
	font-size: .8rem;
	font-weight: 600;
	color: var(--text-faint);
}

.group ul {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	list-style: none;
}

.group li {
	padding: .28em .7em;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--chip);
	font-size: .82rem;
	color: var(--text-soft);
	transition: color .25s ease, border-color .25s ease;
}

.group li:hover {
	color: var(--text);
	border-color: var(--line-hover);
}

/* ── Links ────────────────────────────────────────────────── */

.links {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	list-style: none;
}

.links a {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .6rem .75rem;
	margin: 0 -.75rem;
	border-radius: 12px;
	color: var(--text-soft);
	text-decoration: none;
	font-size: .95rem;
	transition: color .25s ease, background-color .25s ease;
}

.links a:hover,
.links a:focus-visible {
	color: var(--text);
	background: var(--chip);
}

.links svg {
	width: 20px;
	height: 20px;
	flex: none;
	color: var(--text-faint);
	transition: color .25s ease, transform .25s ease;
}

.links a:hover svg,
.links a:focus-visible svg {
	color: var(--accent);
	transform: translateY(-1px);
}

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

/* ── Entrance ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
	.tile {
		animation: rise .7s cubic-bezier(.2, .7, .3, 1) backwards;
	}

	.tile--photo { animation-delay: .00s; }
	.tile--intro { animation-delay: .06s; }
	.tile--now   { animation-delay: .12s; }
	.tile--stack { animation-delay: .18s; }
	.tile--links { animation-delay: .24s; }

	@keyframes rise {
		from {
			opacity: 0;
			transform: translateY(14px);
		}
	}
}