/* --------------------------------------------------------
 * Fonts
 * --------------------------------------------------------*/

@font-face {
	font-style: normal;
	font-weight: 300;
	src: url('/assets/fonts/StackSansText-Light.woff2') format('woff2');
	font-family: 'Stack Sans Text';
	font-display: swap;
}

@font-face {
	font-style: normal;
	font-weight: 700;
	src: url('/assets/fonts/StackSansText-Bold.woff2') format('woff2');
	font-family: 'Stack Sans Text';
	font-display: swap;
}

/* --------------------------------------------------------
 * Setup
 * --------------------------------------------------------*/

:root {
  --font-size--2: clamp(0.64rem, 0.6012rem + 0.1939vw, 0.72rem);
  --font-size--1: clamp(0.8rem, 0.7515rem + 0.2424vw, 0.9rem);
  --font-size-0: clamp(1rem, 0.9394rem + 0.303vw, 1.125rem);
  --font-size-1: clamp(1.25rem, 1.1742rem + 0.3788vw, 1.4063rem);
  --font-size-2: clamp(1.5625rem, 1.4678rem + 0.4735vw, 1.7578rem);
  --font-size-3: clamp(1.9531rem, 1.8348rem + 0.5919vw, 2.1973rem);
  --font-size-4: clamp(2.4414rem, 2.2934rem + 0.7398vw, 2.7466rem);
  --font-size-5: clamp(3.0518rem, 2.8668rem + 0.9248vw, 3.4332rem);

	--space-3xs: clamp(0.25rem, 0.2197rem + 0.1515vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4697rem + 0.1515vw, 0.5625rem);
  --space-xs: clamp(0.75rem, 0.6894rem + 0.303vw, 0.875rem);
  --space-s: clamp(1rem, 0.9394rem + 0.303vw, 1.125rem);
  --space-m: clamp(1.5rem, 1.4091rem + 0.4545vw, 1.6875rem);
  --space-l: clamp(2rem, 1.8788rem + 0.6061vw, 2.25rem);
  --space-xl: clamp(3rem, 2.8182rem + 0.9091vw, 3.375rem);
  --space-2xl: clamp(4rem, 3.7576rem + 1.2121vw, 4.5rem);
  --space-3xl: clamp(6rem, 5.6364rem + 1.8182vw, 6.75rem);

	--brand: light-dark(deeppink, hotpink);
	--color: light-dark(#000, #fff);
	--bg-color: light-dark(#fff, #0f0f0f);
}

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

html {
	hanging-punctuation: first allow-end last;
	color-scheme: light dark;
	word-break: break-word;
}

body {
	max-inline-size: 51.25em;
	margin: 0 auto;
	padding: var(--space-l) var(--space-l) var(--space-3xl);
	background-color: var(--bg-color);
	color: var(--color);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.5;
	font-family: 'Stack Sans Text', sans-serif;

	@media (width < 500px) {
		padding: var(--space-m) var(--space-m) var(--space-2xl);
	}
}

/* --------------------------------------------------------
 * Generics
 * --------------------------------------------------------*/

:is(h1, h2, h3, h4, h5, h6) {
	font-weight: 700;
  text-wrap: balance;
}

::selection {
	background: var(--brand);
	color: white;
	text-shadow: none;
}

/* --------------------------------------------------------
 * Header
 * --------------------------------------------------------*/

.header {}

.header__name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-block-end: var(--space-3xs);
	gap: var(--space-2xs) var(--space-xs);
	font-size: var(--font-size-2);
	line-height: 1.1;
}

.header__portrait {
	inline-size: var(--space-l);
	block-size: var(--space-l);
	border-radius: 50%;
}

.header__brief {
	margin-block-end: var(--space-s);
	padding-block-end: var(--space-2xs);
	border-block-end: 0.125rem solid var(--color);
}

.brief {
	display: block;
	overflow: hidden;
}

.brief__item {
	display: inline-block;
	position: relative;
	margin-inline-end: 1em;
	font-size: var(--font-size--1);
}

.brief__item::before {
	position: absolute;
	inset-inline-start: -0.8em;
	content: '\2022';
}

.brief__link {
	color: var(--brand);
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: .15em;
	text-underline-offset: .25em;
	transition: text-decoration-color .1s ease-out;
}

.brief__link:is(:hover, :focus-visible) {
	text-decoration-color: var(--brand);
}

/* --------------------------------------------------------
 * CV Section
 * --------------------------------------------------------*/

.cv-area {}

.cv-area + .cv-area {
	margin-block-start: var(--space-xl);
}

.cv-area__title {
	margin-block-end: var(--space-m);
	padding-block-end: var(--space-3xs);
	border-block-end: 0.0625em solid var(--color);
	font-size: var(--font-size-1);
	text-transform: uppercase;
}

.cv-area__item {}

.cv-area__text {
	font-size: var(--font-size--1);
	line-height: 1.8;
	letter-spacing: 0.03em;
	text-wrap: pretty;
}

/* --------------------------------------------------------
 * Experience item
 * --------------------------------------------------------*/

.exp {}

.exp + .exp {
	margin-block-start: var(--space-m);

	@media (width >= 500px) {
		margin-block-start: var(--space-l);
	}

	@media (width >= 640px) {
		margin-block-start: var(--space-xl);
	}
}

.exp__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	margin-block-end: var(--space-s);
	gap: var(--space-3xs) var(--space-xl);

	@media (width >= 640px) {
		flex-wrap: nowrap;
	}
}

.exp__title {
	width: 100%;
	font-size: var(--font-size-0);
	text-wrap: pretty;

	@media (width >= 640px) {
		width: auto;
		text-wrap: balance;
	}
}

.exp__date {
	flex-shrink: 0;
	font-weight: 700;
	font-size: var(--font-size--1);
}

.exp__list {
	padding-inline-start: 1em;
}

.exp__item {
	font-size: var(--font-size--1);
	letter-spacing: 0.03em;
	text-wrap: pretty;
}

.exp__item strong {
	font-weight: 700;
}

p.exp__item {
	line-height: 1.8;
}

li.exp__item {
	display: list-item;
	padding-inline-start: .5em;
	list-style-type: disc;
}

li.exp__item + li.exp__item {
	margin-block-start: var(--space-2xs);
}