/*
 * calin.de - stylesheet
 * Calin Somoza, 2026. No external resources, no webfonts, no tracking.
 */

:root {
	--bg:        #ffffff;
	--bg-soft:   #f5f6f7;
	--fg:        #1c1f23;
	--fg-soft:   #5b6570;
	--rule:      #dfe3e7;
	--accent:    #0f6f6a;
	--accent-fg: #0b514d;
	--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
	        "Liberation Mono", monospace;
	--sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
	        Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg:        #14171a;
		--bg-soft:   #1c2024;
		--fg:        #e7eaed;
		--fg-soft:   #9aa5b0;
		--rule:      #2b3138;
		--accent:    #4fd1c7;
		--accent-fg: #6fe0d6;
	}
}

* { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.65;
	overflow-wrap: break-word;
}

.wrap {
	max-width: 46rem;
	margin: 0 auto;
	padding: 0 1.25rem;
}

/* ---------------------------------------------------------------- header */

header.site {
	border-bottom: 1px solid var(--rule);
	padding: 1.5rem 0 1.25rem;
	margin-bottom: 2.5rem;
}

.site-id {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;
}

.site-id a.name {
	font-family: var(--mono);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--fg);
	text-decoration: none;
}

.site-id a.name::before {
	content: "$ ";
	color: var(--accent);
}

nav.site {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.25rem;
	margin-top: 0.75rem;
	font-size: 0.94rem;
}

nav.site a {
	color: var(--fg-soft);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 1px;
}

nav.site a:hover,
nav.site a:focus-visible { color: var(--accent-fg); border-bottom-color: var(--accent); }

nav.site a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent); }

.lang {
	font-family: var(--mono);
	font-size: 0.85rem;
	color: var(--fg-soft);
}

.lang a { color: var(--accent-fg); }

/* ----------------------------------------------------------------- text */

h1 {
	font-size: clamp(1.7rem, 5vw, 2.3rem);
	line-height: 1.2;
	margin: 0 0 0.4rem;
	letter-spacing: -0.015em;
}

.role {
	font-family: var(--mono);
	color: var(--fg-soft);
	font-size: 0.98rem;
	margin: 0 0 2rem;
}

h2 {
	font-size: 1.15rem;
	margin: 2.75rem 0 0.9rem;
	padding-bottom: 0.35rem;
	border-bottom: 1px solid var(--rule);
	letter-spacing: -0.005em;
}

h3 { font-size: 1rem; margin: 1.75rem 0 0.3rem; }

p { margin: 0 0 1.1rem; }

a { color: var(--accent-fg); }

ul.plain { list-style: none; padding: 0; margin: 0 0 1.1rem; }

ul.plain li {
	padding-left: 1.35rem;
	position: relative;
	margin-bottom: 0.45rem;
}

ul.plain li::before {
	content: "▸";
	position: absolute;
	left: 0;
	color: var(--accent);
}

/* ----------------------------------------------------------- definitions */

dl.facts {
	display: grid;
	grid-template-columns: minmax(8.5rem, auto) 1fr;
	gap: 0.4rem 1.25rem;
	margin: 0 0 1.5rem;
}

dl.facts dt {
	font-family: var(--mono);
	font-size: 0.88rem;
	color: var(--fg-soft);
	padding-top: 0.15rem;
}

dl.facts dd { margin: 0; }

@media (max-width: 30rem) {
	dl.facts { grid-template-columns: 1fr; gap: 0 0; }
	dl.facts dt { margin-top: 0.9rem; }
}

/* -------------------------------------------------------------- timeline */

ol.cv { list-style: none; padding: 0; margin: 0; }

ol.cv > li {
	border-left: 2px solid var(--rule);
	padding: 0 0 1.6rem 1.25rem;
	position: relative;
}

ol.cv > li::before {
	content: "";
	position: absolute;
	left: -5px;
	top: 0.55rem;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent);
}

ol.cv > li:last-child { border-left-color: transparent; padding-bottom: 0; }

ol.cv .when {
	font-family: var(--mono);
	font-size: 0.82rem;
	color: var(--fg-soft);
	display: block;
}

ol.cv .what { font-weight: 600; }

ol.cv .detail { color: var(--fg-soft); font-size: 0.95rem; }

/* ---------------------------------------------------------------- footer */

footer.site {
	margin-top: 4rem;
	border-top: 1px solid var(--rule);
	padding: 1.25rem 0 3rem;
	font-size: 0.9rem;
	color: var(--fg-soft);
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
	justify-content: space-between;
}

footer.site a { color: var(--fg-soft); }
footer.site a:hover { color: var(--accent-fg); }

/* ----------------------------------------------------------------- misc */

.note {
	background: var(--bg-soft);
	border-left: 3px solid var(--accent);
	padding: 0.85rem 1rem;
	margin: 0 0 1.1rem;
	font-size: 0.95rem;
}

.legal { font-size: 0.95rem; }
.legal h2 { font-size: 1.05rem; }
.legal h3 { font-size: 0.97rem; color: var(--fg-soft); }

address { font-style: normal; margin-bottom: 1.1rem; }

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