* {
	font: inherit;
	align-items: center;
	box-sizing: border-box;
	line-height: inherit;
	text-underline-offset: calc(.1rem + .1em);
	font-kerning: normal;
	line-height: calc(.6em + .7rem + 0.5vw);
}

:root {
	--color-warm-200: #F7E8C8;
	--color-warm-400: #F6BC65;
	--color-warm-500: #DB9251;
	--color-warm-600: #B16A28;
	--color-warm-700: #7C4A1C;
	--color-warm-800: #4A2A0C;

	--color-cool-600: #33677D;
	--color-cool-700: #2F505E;

	--font-family-text: halyard-text-variable, Helvetica, Arial, sans-serif;
	--font-family-title: aboreto, var(--font-family-text);
	
	--font-size-mini: clamp(13px, 0.85em, 1rem);
	--font-size-1: 1.1em;

	--line: 2px;
	--ui: 2.5em;
	--radius: calc( var(--ui) / 2 );
	--breakpoint: 60rem;
	--space-v: 4rem;

	--button-color-main: var(--color-warm-700);
	--button-color-reverse: var(--color-warm-400);

	color: var(--color-warm-800);
	font-family: var(--font-family-text);
	/* line-height: calc(.7em + .7rem + 0.5vw); */
}

/* TYPOGRAPHY */

strong {
	font-weight: 700;
	font-variation-settings: "wght" 700;
}

h1,h2,h3,h4,h5,h6 {
	margin-block: 0;
}

:is(h1,h2,h3,h4,h5,h6,p) a {
	color: inherit;

	&:is(:hover, :visited) { color: inherit; }
}

.h1 {
	font-family: var(--font-family-title);
	font-size: clamp( 2.5rem, 2rem + 4vw, 4rem );
	line-height: 1em;
	margin-inline: -0.15ch;
}

.h2 {
	line-height: max( 1em, .8em + .7rem );
	/* font-family: var(--font-family-title);
	font-size: clamp( 2rem, 1.5rem + 4vw, 3rem );*/
	font-variation-settings: "wght" 500;
	font-size: clamp( 1.5rem, 1rem + 4vw, 2.5rem );
}

.sub,
.h3 {
	text-transform: uppercase;
	letter-spacing: calc( .075ch + 2px );
}

.h3, .h4 {
	font-size: var(--font-size-1);
	font-variation-settings: "wght" 750;
	font-kerning: normal;
}

p, .p {
	margin-block: calc( .4em + .4rem + 0.7vw );
}

ul, ol {
	padding-inline-start: 1.5rem;
	margin-block: calc( .2em + .2rem + 0.2vw );
}

li {
	margin-block: calc( .2em + .2rem + 0.2vw );
	padding-left: 0.5rem;
}

sup, sub {
	text-decoration: underline;
	font-weight: bold;
	font-size: .7em;
	line-height: 1em;
	display: inline-block;
	padding-inline: .5ch;
}

/* UI */

[class*='fa-'] {
	--fa-style-family: "Font Awesome 6 Sharp";
	font-family: var(--fa-style-family);
}

button, a.button {
	cursor: pointer;
	display: inline-flex;
}

a.button {
	text-decoration: none;
}

.button {
	--border-color: transparent;
	--background: transparent;
	--color: var(--button-color-main);
	background: var(--background);
	border: var(--line) solid var(--border-color);
	border-radius: var(--radius);
	color: var(--color);
	display: inline-flex;
	gap: .5rem;
	line-height: 1em;
	min-height: calc( var(--ui) - var(--line) * 2 );
	min-width: var(--ui);
	padding-inline: 1rem;

	&.primary {
		--background: var(--button-color-main);
		--color: var(--button-color-reverse);
		
		&:is(:hover,:focus) {
			--background: var(--button-color-reverse);
			--color: var(--button-color-main);
		}
	}

	&.outlined {
		--border-color: var(--button-color-main);
		
		&:is(:hover, :focus) {
			--background: var(--button-color-reverse);
		}
	}
}

.dm-in {
	--border: currentColor;
	--height: var(--ui);
	display: block;
	margin-block: 1rem;

	& .label {
		font-size: var(--font-size-mini);
		font-variation-settings: "wght" 500;
		padding-inline-start: calc( var(--radius) / 3 );
	}

	& .base {
		border: var(--line) solid var(--border);
		border-radius: var(--radius);
		display: flex;
		min-height: var(--height);
	}

	& :is(input, textarea) {
		background: transparent;
		border: none;
		color: inherit;
		padding-inline: var(--radius);
		padding-block: .2rem;
		width: 100%;

		&:focus { outline: none; }
	}

	& input {
		line-height: 1em;
	}

	& textarea {
		padding-block: .75rem;
		resize: vertical;
	}
}

.err {
	color: darkred;
}

/* LAYOUT */

body {
	margin: 0;
}

.row {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

:is(section, footer) > .wrapper {
	padding-inline: 1rem;
	padding-block: var(--space-v);
}

@media ( max-width: 60rem ) {
	section > .wrapper > .content {
		width: 100%;
		max-width: calc(35rem + 20vw);
		margin-inline: auto;
	}

	.h3 {
		text-align: center;
		margin-bottom: 2rem;
	}

	.row { justify-content: center; }
}

@media ( min-width: 60rem ) {
	section {
		display: grid;
		grid-template-columns: 50% 50%;
		align-items: stretch;
		--max-width: 30rem;
		
		& > .wrapper {
			display: grid;

			& > .content {
				grid-column: 2;
				width: 100%;
				max-width: 25rem;
			}
		}
		
		& > .wrapper:first-of-type {
			grid-template-columns: 
				minmax( 2rem, 2fr )
				auto
				minmax( 1rem, 1fr )
			;
		}
		
		& > .wrapper:nth-of-type(2) {
			grid-template-columns: 
				minmax( 1rem, 1fr )
				auto
				minmax( 2rem, 2fr )
			;
		}
	}
}



#logo {
	display: grid;
	font-size: clamp( 1.3rem, 1rem + 1vw, 3rem );
	margin-bottom: 2rem;

	& > .h1 { 
		font-size: clamp( 2.75em, 2.25em + 1.5vw, 3.5em );
		margin-bottom: .1em; 
		line-height: 1em;
		margin-inline: -.15ch;
	}

	& > .sub {
		font-size: 1em;
		font-variation-settings: "wght" 600;
	}
}

.profile {
	overflow: hidden;
	width: 100%;

	& img {
		display: block;
		width: auto;
		height: var(--img-height);
	}

	& .mask {
		position: absolute;
		z-index: 2;
		inset: 0;
		border-radius: inherit;
		background: linear-gradient(to bottom,
			var(--color-warm-400),
			var(--color-warm-600)
		);
		opacity: 62%;
		mix-blend-mode: hard-light;
	}
}

@media ( max-width: 60rem ) {
	
	#intro_profile {
		background: var(--color-cool-700);
		color: var(--color-warm-200);
		--button-color-main: var(--color-warm-400);
		--button-color-reverse: var(--color-warm-800);
		--intro-height: 75vh;
		/* padding-bottom: var(--space-v); */
	}

	#intro {
		position: relative;
		z-index: 2;

		& .row { margin-top: 2rem; }
		& .button { margin-top: .5rem; }
	}

	#logo {
		height: calc( var(--intro-height) );
		padding-bottom: calc( var(--intro-height) * .8);
		align-content: end;
		margin-bottom: 0;
		/* margin-bottom: var(--space-v); */
	}

	#profile { padding-block: 0; }
	
	.profile {
		position: absolute;
		top: 0;
		height: var(--intro-height);
		left: 0;
		right: 0;
		--img-height: 150%;

		&::before, &::after {
			content: "";
			display: block;
			position: absolute;
		}
		
		&::before {
			inset: 0;
			right: calc( 50rem - 70vw );
			background: var(--color-warm-800);
		}

		&::after {
			background: linear-gradient(to right, 
				var(--color-warm-800),
				var(--color-warm-800) 20%,
				transparent
			);
			top: 0;
			bottom: 0;
			left: -5rem;
			width: calc(-20rem + 140vw);
			z-index: 1;
		}

		& img {
			position: absolute;
			right: calc( -2.5rem + 4% );
			bottom: 0;
		}
	}
}

@media ( min-width: 60rem ) {

	#intro_profile {
		--button-color-main: var(--color-warm-500);
		--button-color-reverse: var(--color-warm-800);
		background: var(--color-warm-200);
		position: relative;
	}

	#logo {
		color: var(--color-warm-600);
	}

	#profile {
		grid-template-columns: 
			minmax( 1rem, 1fr )
			minmax( auto, 25rem )
			minmax( 2rem, 2fr )
		;
	
		& .content {
			position: relative;
		}
	}

	.profile {
		aspect-ratio: 5 / 7; 
		border-radius: var(--radius);
		/* position: relative; */
		--img-height: 170%;

		& img {
			position: relative;
			right: calc( var(--img-height) - 65% );
			transform: translateY( -34% );
		}

		& .mask {
			border: var(--line) solid var(--color-warm-500);
		}
	}
}



#cred_exper {
	background: var(--color-cool-700);
	color: var(--color-warm-200);

	& h2 { color: var(--color-warm-400); }
}

.cred {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-auto-flow: dense;
	padding-block: 1rem;
	column-gap: 1rem;

	& .icon {
		grid-row: 1 / 3;
		font-size: 3rem;
		line-height: 1em;
		width: 3.5rem;
		text-align: center;
		color: var(--color-warm-500);
	}

	& .title {
		font-size: 1.05rem;
		font-variation-settings: "wght" 700;
		grid-column: 2;
	}

	& .details {
		grid-column: 2;
		font-size: 0.95rem;
		opacity: 70%;
	}
}

@media ( max-width: 60rem ) {
	#cred_exper {
		background: var(--color-warm-200);
		color: var(--color-warm-800);

		& h2 { color: var(--color-warm-700); }

		& ul {
			padding-inline-start: 0;

			& > li { 
				display: block; 
				text-align: center;
			}
		}
	}
}



#faq {
	background: var(--color-warm-400);

	& h2 {
		color: var(--color-cool-700);
		margin-bottom: 2rem;
	}

	& summary {
		display: block;
		margin-bottom: .5em;
		color: var(--color-warm-700);
	}
	
	& details:open:not(:last-of-type) {
		margin-bottom: 1.5rem;
	}
	
	& p {
		margin-block: .5em;
	}
}

#contact {
	background: var(--color-warm-500);
	color: var(--color-warm-200);

	& .content > :not(form) {
		color: var(--color-warm-800);
	}
}

@media ( min-width: 60rem ) {
	#contact {
		position: relative;

		& .content {
			position: sticky;
			bottom: 2rem;
			align-self: end;
		}
	}
}



footer {
	background: var(--color-warm-800);
	color: var(--color-warm-200);
	text-align: center;
}