@import url("vars.css");
@import url("reset.css");


:root {
	font-family: var(--sansFont), -system-ui, system-ui, sans-serif;
	font-size:   var(--fontSize);
	line-height: var(--line-height);
	color:       var(--foreground-color);
	letter-spacing: -0.01em;
	text-size-adjust: 100%;
	font-variant-ligatures: contextual common-ligatures;
	background: var(--background-color);
	@media (--viewport-xsmall) {
		background-color: initial;
	}
}

body {
	-webkit-overflow-scrolling: touch;
	text-rendering: optimizelegibility;
	-webkit-font-smoothing: antialiased;
	scroll-behavior: smooth;

	font-family: 'Crimson Pro', serif;
	font-style: normal;
	font-weight: 200;
	font-size: 28px;
	line-height: 140%;
	color: rgba(33, 16, 8, 0.8);

	background: var(--background-color);

	box-shadow: 0 0 0 var(--body-bleed) var(--background-color);

	margin: 0 auto;
	padding: var(--body-padding-y) var(--body-padding-x);
	max-width: var(--body-max-width);
	min-height: 100vh;
	box-sizing: border-box;

}


/* Desktop */

@media (min-width: 1025px) {
	body {
		padding: var(--body-padding-y) var(--body-padding-x);
	}
	
	.home-section {
		font-size: 50px;
	}
	
	.home-section p {
		margin: 72px 0;
	}
	
	.home-section h1 {
		font-size: 50px
	}
	
	r-cell.body {
		grid-column-start: 2;
		grid-column-end: span 4;
		margin-bottom:  calc(var(--unit) * 4);
	}
	
	.workpage picture {
		margin-bottom: calc(var(--unit) * 10);
	}

	.rounded {
		border-radius: 12px;
	}
	
	.workpage h2, .resume h2 {
		text-align: center;
		grid-column-start: 2;
		grid-column-end: span 4;
		margin: calc(var(--unit) * 6) 0;
	}
	
	.workpage h2 span, .resume h2 span {
		padding: 0 calc(var(--unit) * 4);
	}
	
	
}




/* Small */

@media  (max-width: 1024px) {
	body {
		padding: calc(var(--body-padding-y) * 0.5) calc(var(--body-padding-x) * 0.5);
	}
	
	.home-section {
		font-size: 28px;	
	}
	
	.home-section p {
		margin: 24px 0;
	}
	
	.home-section h1 {
		font-size: 28px
	}
	
	.body {
		grid-column-start: 1;
		grid-column-end: span 5;
		margin-bottom:  calc(var(--unit) * 4);
	}
	
	.workpage picture {
		margin-bottom: calc(var(--unit) * 2);
	}
	
	.rounded {
		border-radius: 4px;
	}
	
	.workpage h2, .resume h2 {
		text-align: left;
		grid-column-start: 1;
		grid-column-end: span 6;
		margin: calc(var(--unit) * 4) 0 0 0;
	}
	
	.workpage h2 span, .resume h2 span {
		padding: 0 calc(var(--unit) * 3) 0 0;
	}
	
}







h1 {
	font-size: 56px;
	font-weight: 500;
	letter-spacing: -0.02em;
}

h2 {
	font-size: 32px;
	font-weight: 500;
}

a {
/* color: rgba(33, 16, 8, 0.6); */
text-decoration: none;
}

strong {
	font-weight: 500;
}

r-grid.main img {
	align-content: center;
	margin: 0 auto;
	max-width: 100%;
}









/* Header styling */

.header {
	text-align: center;
	font-family: "inter", sans-serif;
	color: rgba(33, 16, 8, 0.8);
	font-size: 24px;
	font-weight: 500;
	padding-top: 24px;
	padding-bottom: 96px;
	gap: 24px;
	line-height: 48px;
}

.header a {
		color: rgba(33, 16, 8, 0.6);
		text-decoration: none;
		padding: 0 24px;
}

.header .title {
	/* font-weight: 600; */
}

.header #nav {
	font-size: 16px;
}


nav .active {
	font-weight: 500;
	color: #000000;
}


/* Homepage specific styling */

.home-section img {
	margin-bottom: 64px;
}

.home-section {
line-height: 148%;
}

.home-section p {
text-align: left;
direction: ltr;
}

.home-section h1 {
	display: inline;
}

.home-section > h1 + p {
		display: inline;
		text-align: left;
}



/* Case studies */

r-cell.worklist {
	margin-bottom: calc(var(--unit) * 12);
}

r-cell.worklist img {
	margin-bottom: 16px;
}


r-cell.body p {
	padding: 24px 0;
}

.workpage h2, .resume h2 {
	padding: 0;
	background: linear-gradient(180deg, 
	rgba(0,0,0,0) calc(50% - 1px), 
	rgba(192,192,192,1) calc(50%), 
	rgba(0,0,0,0) calc(50% + 1px)
  );
}


/* Footer */

.footer {
	font-size: 16px;
	text-align: center;
	margin-top: 64px;
}

.workpage h2 span, .resume h2 span {
	position: relative;
	background: var(--background-color);
	top: -3px;
}

.workpage .intro h1 {
	margin-bottom: 16px;
}

.workpage .intro span {
	margin-bottom: 16px;
	display: block;
}

.body ul {
	grid-column-start: 2;
	grid-column-end: span 4;
	line-height: 48px;
	
}

.body ul li {
	list-style-type: none;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 24px;
}

.body ul li:before {
	content: '';
	display: inline-block;
	flex: 0 0 20px;
	vertical-align: middle;
	padding: 16px 32px 0 0;
	height: 40px;
	width: 40px;
	background-image: url("/images/bullet.svg");
	background-repeat: no-repeat;
	background-position-y: 1px;
}


.workpage picture {
	grid-column-start: 1;
	grid-column-end: span 6;
	width: 100%;
	height: 100%;
}

.workpage r-cell.body img {
	margin: 64px 0;
}

.full-width {
	max-width: 100%;
}

.youtube {
	height: 0px;
	margin: 48px 0;
	padding-bottom: 56.2%;
	position: relative;
}
.youtube iframe {
	width: 100%;
	height: 100%;
	position: absolute;
}



/* Resume */

r-cell.body a {
	font-weight: 300;
	color: #000000;
	text-decoration: underline;
	text-decoration-color: hsla(360, 1%, 76%, 1);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.resume r-cell.experience p {
	padding: 0;
}

.resume r-cell.experience h3 {
	margin-top: 48px;
}