@font-face {
  font-family: 'SuisseIntl'; 
  src: url('../fonts/SuisseIntl-Book-WebM.woff2') format('woff2'),
    	 url('../fonts/SuisseIntl-Book-WebM.woff') format('woff'); 
  }

/* @group Reset */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

img {
	width: 100%;
	height: auto;
}

figure {
	line-height: 0;	
}

/* @end */

:root {
	--unit: 20px;
	--font: 'SuisseIntl', Arial, sans-serif;;
	--primary-color: rgb(0, 0, 0);
	--secondary-color: rgb(255, 255, 255);
	--border-color: rgba(0, 0, 0, .6);
}

*,
*:after,
*:before{
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;		/* Firefox, other Gecko */
	box-sizing: border-box; 
}

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-family: 'SuisseIntl', Arial, sans-serif;
	font-size: calc(var(--unit) - 2px);
	color: var(--primary-color);
	line-height: 1.2;
}

img {
	border-radius: 5px;
}

a {
	text-decoration: none;
	color: inherit;
}


/* Home */

.intro-header {
	padding: calc(var(--unit) / 2) calc(var(--unit) / 2) 0;
	position: relative;
}

.intro-space {
	height: 100%;
	min-height: calc(100vh - 70vw);
}

.intro-header h1 {
	font-size: 14vw;
	letter-spacing: -0.1rem;
	line-height: 0.9;
	overflow: hidden;
}

.intro-header span {
	transform: translateY(600px);
	display: inline-block;
}

.sequ1 {
	animation: slideUp 1s ease-in-out forwards;		
}

.sequ2 {
	animation: slideUp 1s ease-in-out forwards .3s;		
}

.sequ3 {
	margin-left: -0.18em;
	animation: slideUp 1s ease-in-out forwards .6s;		
}

.info {
	position: absolute;
	left: calc(var(--unit) / 2);
	bottom: calc(var(--unit) / 2);
	width: calc(100% - var(--unit) * 4);
	color: var(--secondary-color);
	animation: color 1s ease-in-out forwards 1s;	
}

.featured {
	margin-bottom: calc(var(--unit) / 2);
}

figure.featured-thumb {
	position: relative;
}

figcaption.featured-caption {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: calc(var(--unit) * 4) calc(var(--unit) / 1.4) calc(var(--unit) / 1.4);
	line-height: 1.15;
	background: transparent;
	background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
}

.light-theme {
	color: var(--secondary-color);
	padding: 60px 10px 10px;
}

.dark-theme {
	color: var(--secondary-color);	
}

.scale img {
	display: block;
	transform: scale(1);
	transition: all .3s ease-in-out;
}

.scale:hover img {
	transform: scale(1.01);
	box-shadow: 0 0 8px rgb(180,180,180);
}

.text-big {
	font-size: 1.55em;
}

.next {
	margin-bottom: var(--unit);
}

@media screen and (min-width: 65rem) {
	.intro-header {
		padding: var(--unit) var(--unit) 0;
	}
	.intro-header h1 {
		font-size: 12vw;
		letter-spacing: -0.25rem;
		line-height: 0.9;
	}
	.info {
		left: var(--unit);
		bottom: var(--unit);
		max-width: 50%;
	}
	.intro-space {
		height: 100%;
		min-height: calc(100vh - 25vw);
	}
	figcaption.featured-caption {
		background: transparent;
	}
	.dark-theme {
		color: var(--primary-color);	
	}
}

.languages {
	display: flex;
	position: absolute;
	top: var(--unit);
	right: var(--unit);
	z-index: 1000;
}

.languages .active {
	display: none;
}

@media screen and (max-width: 45rem) {
	.languages {
		top: calc(var(--unit) / 2);
		right: calc(var(--unit) / 2);
	}
}


/* Grid */

.grid {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-row-gap: calc(var(--unit) / 2);
}

.grid > .column {
	grid-column: span var(--span);
}

.basic-grid {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-row-gap: calc(var(--unit) * 1);
	grid-column-gap: calc(var(--unit) / 2);
}

.wrap--true {
	padding-left: calc(var(--unit) / 2);
	padding-right: calc(var(--unit) / 2);
}

.bottom--small {
	margin-bottom: calc(var(--unit) / 2);
}

.bottom--medium {
	margin-bottom: var(--unit);
}

.bottom--large {
	margin-bottom: calc(var(--unit) * 2);
}

@media screen and (min-width: 65rem) {
	.grid {
		--gutter: calc(var(--unit) / 2);
		grid-template-columns: repeat(12, 1fr);
		grid-gap: var(--gutter);
		grid-row-gap: calc(var(--gutter) * 2);
		grid-column-gap: var(--gutter);
	}
	.basic-grid {
		grid-template-columns: repeat(4, 1fr);
	}
	.wrap--true {
		padding-left: var(--unit);
		padding-right: var(--unit);
	}
}

/* Style */

.project-header {
	padding: calc(var(--unit) / 2);
	margin-bottom: var(--unit);
}

.project-header button {
	font-family: var(--font);
	font-size: calc(var(--unit) - 2px);
	border: none;
	background: transparent;
	cursor: pointer;
	position: absolute;
	top: calc(var(--unit) / 2 - 2px);
	right: calc(var(--unit) * 2 + 5px);
}

.site-footer, .article-footer {
	margin-top: calc(var(--unit) * 8);
	padding: calc(var(--unit) / 2);
}

.hello {
	padding-bottom: var(--unit);
}

.hello a {
	text-decoration: underline;
}

.contact, .footer-menu {
	grid-column: 1 / span 1;
}

.footer-menu {
	margin-top: calc(var(--unit) * 4);
}

.article-footer {
	border-top: 1px solid var(--border-color);
}

figcaption.project-headline {
	line-height: 1;
	margin-top: calc(var(--unit) / 2);
}

@media screen and (min-width: 65rem) {
	.project-header {
		padding: var(--unit);
	}
	.project-header button {
		top: calc(var(--unit) * 1	- 2px);
		right: calc(var(--unit) * 3);
	}
	.contact {
		grid-column: 1 / span 2;
	}
	.footer-menu {
		margin-top: 0;
		grid-column: 4 / span 1;
	}
	.site-footer, .article-footer {
		padding: var(--unit);
	}
}

/* Page */

.page {
	padding: var(--unit);
	min-height: 100vh;
}

.page-copy p {
	max-width: 900px;
	padding-bottom: calc(var(--unit) * 2);
}

.page h1 {
	font-size: calc(var(--unit) * 3);
	margin-top: var(--unit);
	padding-bottom: calc(var(--unit) / 2);
}


.instabtn:before {
	content: ' ';
	display: block;
	width: calc(1em / 1.1);
	height: calc(1em / 1.1);
	border-radius: 50%;
	margin-right: 8px;
	margin-top: 1px;
	float: left;
	background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), 
	radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), 
	radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), 
	radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), 
	radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), 
	radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), 
	radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), 
	linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
}

@keyframes slideUp {
  0% {
    transform: translateY(600px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes color {
  0% {
    color: var(--secondary-color);
  }
  100% {
    color: var(--primary-color);
  }
}