:root {
	--base-colour: #ffffff;
	--background-colour: #fafaf8;
	--background-colour-dark-tint: #dfdfd7;
	--background-colour-placeholder: #ffffff;
	--foreground-colour: #000000;
}

::selection {
	background-color: var(--foreground-colour);
	color: var(--background-colour);
}

* { 
	outline: none; 
	padding: 0;
	margin: 0; 
	border: 0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}
*:after, *:before {
	content: none;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	border-collapse: separate;
	border-spacing: 0;
	text-decoration: none;
}	
html {
	scroll-behavior: smooth;
}
html, body { padding: 0; margin: 0; height: 100%; width: 100%; }

ul, ol { list-style: none; display: block; padding: 0; margin: 0; }

small, sub, sup { font-size: .6em; }
sub { vertical-align: sub; }
sup { vertical-align: top; position: relative; top: -0.4em; left: 0.05em; }

img { max-width: 100%; height: auto; width: auto; border: 0; margin: 0; padding: 0; }

iframe { max-width: 100%; overflow: hidden; }

body {
	background-color: var(--base-colour);
	margin: 0;
	padding: 0;
	overflow: none;
	zoom: 1; 
	width: 100%; 
	position: relative;
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 14px;
	font-optical-sizing: auto;
  	font-style: normal;
	line-height: 22px;
	color: var(--foreground-colour);
	word-wrap: break-word;
	text-rendering: optimizeLegibility;
	text-align: left;
	hyphens: none;
	-webkit-hyphens: none;
	-moz-hyphens: none; 
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;	
	-webkit-tap-highlight-color: var(--foreground-colour);
	-webkit-font-smoothing: antialiased;
}

a { position: relative; color: var(--foreground-colour); white-space: nowrap; }
a:not(.logo):not(.invisible):not(.current):not(.to-the-top):hover { color: var(--foreground-colour); border-bottom: 1px solid var(--foreground-colour); }
a.invisible { border-bottom: none; }

p {
	margin: 0 0 20px 0;
	padding: 0;
	word-wrap: break-word;
	text-rendering: optimizeLegibility;
}
p img { margin: 0; padding: 0; }
p:last-child { margin-bottom: 0; }

ul { 
	list-style-type: none;
	list-style-position: outside;
	margin: 0 0 20px 0;
}
ul li {
	margin-bottom: 20px;
}

/* -------------------- */

body { background-color: var(--base-colour); }

body div.content { padding: 60px 100px 40px 100px; background-color: var(--background-colour); border-top: 3px solid var(--base-colour); }

body header { display: inline-block; width: 100%; margin-bottom: 80px; } 

body header div.branding { float: left; }
body header div.branding img.logo { width: 150px; height: auto; }

body header div#desktop div.menu { float: right; }
body header div#desktop div.menu nav ul { float: right; list-style-type: none; text-align: left; padding-right: 10px; }
body header div#desktop div.menu nav ul li { display: inline-block; margin-right: 60px; border-bottom: none; font-size: 1.4em; font-weight: 500; }
body header div#desktop div.menu nav ul li:last-child { margin-right: 8px; }
body header div#desktop div.menu nav ul li a { color: var(--foreground-colour); padding-bottom: 1px; }
body header div#desktop div.menu nav ul li a.current { color: var(--foreground-colour); border-bottom: 1px solid var(--foreground-colour); }
body header div#desktop div.menu nav ul li a.current:hover { color: var(--foreground-colour); }

body header div#mobile { display: none; }

body main { display: block; width: 100%; }
body main a { border-bottom: 1px solid var(--foreground-colour); }

body main h1, body main h2, body main h3 { clear: both; display: block; }

body main.home h1 { font-family: 'EB Garamond', serif; font-size: 5.8em; font-weight: 400; line-height: 1.1em; width: 85%; margin-bottom: 50px; margin-left: -3px; }
body main.home h2 { font-size: 2.4em; font-weight: 400; line-height: 1.4em; width: 65%; }
body main.home h3 { font-size: 2em; font-weight: 400; line-height: 1.2em; margin-bottom: 40px; }

body main.about h1 { font-family: 'EB Garamond', serif; font-size: 3.4em; font-weight: 400; line-height: 1.2em; width: 80%; margin-bottom: 20px; }
body main.about h2 { font-size: 1.2em; font-weight: 700; line-height: 1.3em; }

body main p { font-size: 1.0em; line-height: 1.4em; }

body main.home article.introduction { display: block; margin-bottom: 60px; }
body main.about article.introduction { display: block; margin-bottom: 60px; }

body main article.overview { display: grid; grid-row-gap: 10px; grid-column-gap: 10px; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--background-colour-dark-tint); border-bottom: 1px solid var(--background-colour-dark-tint); padding: 60px 0 60px 0; }
body main article.overview ul { list-style-type: none; text-align: left; margin: 20px 60px 0 0; }
body main article.overview ul li { display: block; margin-bottom: 10px; font-size: 1.2em; }
body main article.overview ul li:last-child { margin-bottom: 0; }
body main article.overview ul li a { color: var(--foreground-colour); }

body main article.work { display: grid; grid-row-gap: 40px; grid-column-gap: 40px; grid-template-columns: repeat(2, 1fr); margin-bottom: 80px; }
body main article.work figure { display: block; min-height: 0; padding: 0; margin: 0; line-height: 0; opacity: 0; transform: translateY(30px); transition: opacity 1s ease, transform 1s ease; }
body main article.work figure.show { opacity: 1; transform: translateY(0); border: none; background-color: var(--background-colour-placeholder); }
body main article.work figure[data-type='image'] { display: block; width: 100%; height: auto; max-width: 100%; padding: 0; margin: 0;; background-color: var(--background-colour-placeholder); border: none; pointer-events: none; }
body main article.work figure[data-type='image'] img { display: block; width: 100%; height: auto; padding: 0; margin: 0; border: none; aspect-ratio: 16/9; pointer-events: none; -webkit-user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; }
body main article.work figure[data-type='video'] { display: block; position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background-color: var(--background-colour-placeholder); border: none; }
body main article.work figure[data-type='video'] iframe { display: block; position: absolute; width: 100%; height: auto; overflow: hidden; background-color: var(--background-colour-placeholder); border: none; aspect-ratio: 16/9; }

body main article.contact { display: block; margin-top: 40px; }
body main article.contact ul { list-style-type: none; text-align: left; }
body main article.contact ul li { display: inline-block; margin-right: 40px; font-size: 1.2em; }
body main article.contact ul li:last-child { margin-right: 0; }
body main article.contact ul li a { color: var(--foreground-colour); border-bottom: 1px solid var(--foreground-colour); }

body main article.collaborations { display: block; margin-bottom: 10px; }

body footer { display: block; text-align: left; }

a#to-the-top { display: none; position: fixed; bottom: 30px; right: 30px; cursor: pointer; font-size: 3em; font-weight: 300; line-height: 1em; text-decoration: none; color: var(--foreground-colour, #000 ); z-index: 9999; }
a#to-the-top:hover, a#to-the-top:active, a#to-the-top:visited { text-decoration: none; border: none; }

/* -------------------- */

@media only screen and (min-width: 1401px) and (max-width: 1750px)
{
	body { width: 100%; font-size: 12px; line-height: 22px; }
	
	body div.content { padding: 50px 60px 30px 60px; }

	body header { margin-bottom: 80px; }

	body main.home article.about { margin-bottom: 40px; }

	body main.home h1 { font-size: 5em; margin-bottom: 60px; margin-left: 0; }
	body main.home h2 { font-size: 2.6em; width: 80%; }

	body main.home article.introduction { margin-bottom: 60px; }
	body main.about article.introduction { margin-bottom: 60px; }

	body main article.work { grid-template-columns: repeat(2, 1fr); }

	body footer { margin: 10px 0 20px 0px; }
}

/* -------------------- */

@media only screen and (min-width: 1024px) and (max-width: 1400px)
{
	body { width: 100%; font-size: 12px; line-height: 22px; }
	
	body div.content { padding: 40px 30px 30px 30px; }

	body header { margin-bottom: 80px; }

	body main.home article.about { margin-bottom: 40px; }

	body main.home h1 { font-size: 5em; margin-bottom: 60px; margin-left: 0; }
	body main.home h2 { font-size: 2.6em; width: 80%; }

	body main.about h1 { font-size: 3.0em; width: 80%; margin-bottom: 60px; }
	body main.about h2 { font-size: 1.3em; width: 75%; font-weight: 500; }

	body main.home article.introduction { margin-bottom: 60px; }
	body main.about article.introduction { margin-bottom: 20px; }

	body main article.overview { grid-template-columns: repeat(4, 1fr); }
	body main article.work { grid-template-columns: repeat(2, 1fr); }

	body footer { margin: 10px 0 20px 0px; }
}

/* -------------------- */

@media only screen and (min-width: 769px) and (max-width: 1023px)
{
	body { width: 100%; font-size: 12px; line-height: 22px; }

	body div.content { padding: 40px 30px 30px 30px; }

	body header { margin-bottom: 60px; }

	body header div#desktop div.menu nav ul li { display: inline-block; margin-right: 40px; border-bottom: none; font-size: 1.4em; font-weight: 400; }

	body main.home article.about { padding-bottom: 40px; }

	body main.home h1 { font-size: 4.5em; font-weight: 400; width: 100%; margin-bottom: 40px; margin-left: 0; }
	body main.home h2 { font-size: 2.6em; width: 100%; }

	body main.home article.introduction { margin-bottom: 50px; }
	body main.about article.introduction { margin-bottom: 20px; }

	body main article.work { grid-template-columns: repeat(2, 1fr); }

	body footer { margin: 10px 0 20px 0px; }
}

/* -------------------- */

@media only screen and (max-width: 768px)
{	
	body { background-color: var(--background-colour); width: 100%; font-size: 12px; line-height: 22px; }

	body div.content { padding: 30px 15px 20px 15px; border: none; }

	body p { margin-bottom: 25px; word-wrap: break-word; }

	body header { margin-bottom: 50px; }
	body header nav { margin-bottom: 30px; }
	body header nav ul li { line-height: 50px; }

	body header div#desktop { display: none; }
	body header div#mobile { display: block; }
	
	body header div#mobile div.branding img.logo { width: 130px; height: auto; }
	body header div#mobile div.menu img.menu-open { width: 26px; height: 26px; cursor: pointer; float: right; margin-top: -4px; }
	body header div#mobile div.overlay { display: none; width: 100%; height: 100%; z-index: 99999; touch-action: none; }
	body header div#mobile div.overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-color: var(--background-colour); padding: 30px 15px 0px 15px; }
	body header div#mobile div.overlay img.menu-close { width: 24px; height: 24px; cursor: pointer; float: right; margin-top: -3px; }
	body header div#mobile div.overlay nav ul { list-style: none; margin-top: 130px; }
	body header div#mobile div.overlay nav ul li { display: block; float: none; margin-bottom: 20px; font-size: 2em; text-align: center; }
	body header div#mobile div.overlay nav ul li.current a { border-bottom: 1px solid var(--foreground-colour); }

	body main { width: 100%; }

	body main.home h1 { font-size: 3em; font-weight: 400; line-height: 1.1em; width: 100%; margin-bottom: 30px; margin-left: 0; }
	body main.home h2 { font-size: 1.5em; font-weight: 400; line-height: 1.5em; width: 100%; }
	body main.home h3 { font-size: 1.3em; font-weight: 400; line-height: 1.4em; width: 100%; margin-bottom: 20px; }

	body main.about h1 { font-size: 2.4em; font-weight: 400; line-height: 1.2em; width: 100%; margin-bottom: 30px; }
	body main.about h2 { font-size: 1.2em; font-weight: 600; line-height: 1.4em; width: 100%; }

	body main.home article.introduction { margin-bottom: 40px; }
	body main.about article.introduction { margin-bottom: 40px; }

	body main article.overview { grid-row-gap: 15px; grid-column-gap: 15px; grid-template-columns: repeat(2, 1fr); padding: 40px 0 40px 0; }
	body main article.overview ul { margin: 10px 0 0 0; }

	body main article.work { grid-template-columns: 1fr; grid-column-gap: 15px; grid-row-gap: 15px; }

	body main article.collaborations { margin-top: 40px; }

	body footer { margin-top: 10px; padding-bottom: 10px; }

	body .to-the-top { right: 20px; }
}