:root {
	/* Fonts */
	--font-sans-serif: system-ui, sans-serif;

	/* Wrapper */
	--wrapper-max-width: 1440px;

	/* Borders */
	--border-radius-default: 0.75rem;

	/* @link https://utopia.fyi/type/calculator?c=360,17,1.2,1500,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
	--step--2: clamp(0.7378rem, 0.7182rem + 0.0872vw, 0.8rem);
	--step--1: clamp(0.8854rem, 0.8492rem + 0.1608vw, 1rem);
	--step-0: clamp(1.0625rem, 1.0033rem + 0.2632vw, 1.25rem);
	--step-1: clamp(1.275rem, 1.1842rem + 0.4035vw, 1.5625rem);
	--step-2: clamp(1.53rem, 1.3964rem + 0.5939vw, 1.9531rem);
	--step-3: clamp(1.836rem, 1.6448rem + 0.8497vw, 2.4414rem);
	--step-4: clamp(2.2032rem, 1.9352rem + 1.191vw, 3.0518rem);
	--step-5: clamp(2.6438rem, 2.2741rem + 1.6433vw, 3.8147rem);

	/* @link https://utopia.fyi/space/calculator?c=360,17,1.2,1500,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
	--space-3xs: clamp(0.25rem, 0.2303rem + 0.0877vw, 0.3125rem);
	--space-2xs: clamp(0.5625rem, 0.5428rem + 0.0877vw, 0.625rem);
	--space-xs: clamp(0.8125rem, 0.773rem + 0.1754vw, 0.9375rem);
	--space-s: clamp(1.0625rem, 1.0033rem + 0.2632vw, 1.25rem);
	--space-m: clamp(1.625rem, 1.5461rem + 0.3509vw, 1.875rem);
	--space-l: clamp(2.125rem, 2.0066rem + 0.5263vw, 2.5rem);
	--space-xl: clamp(3.1875rem, 3.0099rem + 0.7895vw, 3.75rem);
	--space-2xl: clamp(4.25rem, 4.0132rem + 1.0526vw, 5rem);
	--space-3xl: clamp(6.375rem, 6.0197rem + 1.5789vw, 7.5rem);

	/* One-up pairs */
	--space-3xs-2xs: clamp(0.25rem, 0.1316rem + 0.5263vw, 0.625rem);
	--space-2xs-xs: clamp(0.5625rem, 0.4441rem + 0.5263vw, 0.9375rem);
	--space-xs-s: clamp(0.8125rem, 0.6743rem + 0.614vw, 1.25rem);
	--space-s-m: clamp(1.0625rem, 0.8059rem + 1.1404vw, 1.875rem);
	--space-m-l: clamp(1.625rem, 1.3487rem + 1.2281vw, 2.5rem);
	--space-l-xl: clamp(2.125rem, 1.6118rem + 2.2807vw, 3.75rem);
	--space-xl-2xl: clamp(3.1875rem, 2.6151rem + 2.5439vw, 5rem);
	--space-2xl-3xl: clamp(4.25rem, 3.2237rem + 4.5614vw, 7.5rem);

	/* Colors */
	--color-americano-50: #f4f3f2;
	--color-americano-100: #e4e2dd;
	--color-americano-200: #ccc4bc;
	--color-americano-300: #aea196;
	--color-americano-400: #978678;
	--color-americano-500: #88766a;
	--color-americano-600: #74635a;
	--color-americano-700: #5e4f4a;
	--color-americano-800: #514542;
	--color-americano-900: #483c3b;

	--color-gray-50: oklch(98.5% 0.002 247.839);
	--color-gray-100: oklch(96.7% 0.003 264.542);
	--color-gray-200: oklch(92.8% 0.006 264.531);
	--color-gray-300: oklch(87.2% 0.01 258.338);
	--color-gray-400: oklch(70.7% 0.022 261.325);
	--color-gray-500: oklch(55.1% 0.027 264.364);
	--color-gray-600: oklch(44.6% 0.03 256.802);
	--color-gray-700: oklch(37.3% 0.034 259.733);
	--color-gray-800: oklch(27.8% 0.033 256.848);
	--color-gray-900: oklch(21% 0.034 264.665);
	--color-gray-950: oklch(13% 0.028 261.692);
}

.bold {
	font-weight: 700;
}

.text-center {
	text-align: center;
}

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

* {
	margin: 0;
	padding: 0;
}

html {
	color: var(--color-gray-800);
	font-family: var(--font-sans-serif);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

html,
body {
	background-color: var(--color-gray-50);
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	font-size: var(--step-0);
}

main {
	flex-grow: 1;
}

p {
	max-width: 65ch;
}

a {
	color: inherit;
	text-underline-offset: 3px;
}

ul {
	margin-left: 1rem;
}

h1,
h2,
h3,
h4 {
	font-weight: 700;
	line-height: 1.1;
	text-wrap: balance;
}

h1 {
	font-size: var(--step-3);
}

h2 {
	font-size: var(--step-2);
}

h3 {
	font-size: var(--step-1);
}

h4 {
	font-size: var(--step-0);
}

img {
	display: block;
	max-inline-size: 100%;
	block-size: auto;
	border-radius: var(--border-radius-default);
}

section:not([class]),
.region {
	padding-block: var(--space-m-l);
}

nav {
	--cluster-gap: var(--space-xs-s);
	line-height: 1;
	& a {
		font-weight: 500;
		text-decoration: none;
		&:hover {
			text-decoration: underline;
		}
	}
}

.cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cluster-gap, 1rem);
}

.wrapper {
	margin-inline: auto;
	max-width: var(--wrapper-max-width);
	padding-inline: var(--space-m-l);

	&:has(.hero) {
		--wrapper-max-width: 1510px;
	}
}

.article {
	max-width: 75ch;
	margin-inline: auto;
}

.flow > * + * {
	margin-top: var(--flow-space, 1em);
}

.b-cv {
	background-color: white;
	padding: var(--space-s-m);
	border-radius: var(--border-radius-default);
	max-width: 65ch;
}

.header {
	/* flex-grow and flex-shrink for sticky footer */
	flex-grow: 0;
	flex-shrink: 0;
	padding-block: var(--space-s-m);

	& .header__inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		gap: var(--space-s-m);
	}

	& .site-title {
		font-weight: 500;
		font-size: var(--step-1);
		text-decoration: none;
		text-transform: uppercase;
	}
}

.footer {
	background-color: var(--color-americano-500);
	color: var(--color-gray-50);
	flex-grow: 0;
	flex-shrink: 0;
	margin-top: var(--space-l);
	padding-block: var(--space-m-l);
	text-align: center;

	& .footer__title {
		font-size: var(--step-0);
	}

	& a {
		text-decoration: none;
		&:hover {
			text-decoration: underline;
		}
	}

	& ul {
		list-style: none;
		font-size: var(--step--1);
	}
}

.gallery {
	--flow-space: var(--space-m-l);
	--border-radius-default: 5px;

	& h2 {
		font-size: var(--step-1);
	}

	& h3 {
		font-size: var(--step-0);
	}

	& .gallery-block {
		margin-top: var(--space-m);
	}

	& .gallery-album__grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		gap: var(--space-2xs);
		& img {
			width: 100%;
		}
	}

	& .gallery-album__title {
		margin-block: 2em 1em;
		text-transform: capitalize;
	}
}

.hero {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--space-xs);

	@media (width < 850px) {
		display: block;
		& .hero__carousel {
			display: none;
		}
	}

	& .hero__image {
		aspect-ratio: 16/9;
		width: 100%;
		object-fit: cover;
	}
}

.b-puff-container {
	display: grid;
	gap: var(--space-m-l);
}

.b-puff {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-s-m);

	@media (width >= 850px) {
		grid-template-columns: 1fr 1fr;
		&:nth-child(even) > div:last-of-type {
			order: -1;
		}
	}

	& .b-puff__info {
		place-content: center;
		text-align: center;
	}
}

.b-now {
	border: 1px solid var(--color-gray-300);
	max-width: 600px;
	margin-inline: auto;
	padding: var(--space-s-m);
	border-radius: 0.5rem;
}

.container {
	max-width: 42rem;
	margin-inline: auto;
}

ken-burns-carousel {
	display: block;
	height: 100%;
	width: 100%;
	border-radius: var(--border-radius-default);
}