/* Import global variables */
@import url('variables.css');

/* BASELINE */

html
{
	font-size: 16px;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smoothing: antialiased;
	scroll-behavior: smooth;
}

*, *:before, *:after
{
	box-sizing: inherit;
	margin: 0;
	padding: 0;
}

body
{
	background: var(--white);
	color: var(--black);
	font-family: "scto-grotesk-a-thin"; /* default typeface across entire project */
}

a
{
	color: var(--black);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 0.25rem;
	text-decoration-thickness: 0.02em;
}

p
{
	line-height: 140%;
	letter-spacing: -0.02em;
}


strong, b
{
	font-family: "scto-grotesk-a-regular";
	font-weight: inherit;
}

hr
{
	border: none;
	border-top: solid 1px var(--black);
}

img
{
	display: block; /* ensures images render without space around them */
}



/* CORE Z-INDEX VALUES */

#bff
{
	z-index: 2;
}

#content
{
	z-index: 3;
}

*[id^="warning"]
{
	z-index: 4;
}

#preloader
{
	z-index: 5;
}




/* LOADER & WARNING STYLES */

#preloader, *[id^="warning"], *[id^="bff"]
{
	width: 100%;
	height: 100%;
	position: fixed;
}

#preloader
{
	background: var(--white);
}

*[id^="warning"]
{
	display: none;
	background: var(--white);
}

p.loading, *[id^="warning"] p
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);

	font-family: "scto-grotesk-a-thin";
	font-size: 0.875rem;
	text-align: center;

	animation-name: blink;
	animation-duration: 1.2s;
	animation-iteration-count: infinite;
}

#preloader p
{
	color: var(--black);
}

*[id^="bff"] p
{
	font-family: "scto-grotesk-a-regular";
	position: fixed;
	font-size: 6rem;
	text-transform: uppercase;
	transform: translate(-50%,-50%);
}

*[id^="bff"] p:first-child
{
	top: 25%;
	left: 25%;
}

*[id^="bff"] p:nth-child(2)
{
	top: 50%;
	left: 75%;
}

*[id^="bff"] p:nth-child(3)
{
	top: 75%;
	left: 25%;
}

*[class^="delay_"]
{
	opacity: 0;
	animation-name: fade-in;
	animation-duration: 0.4s;
	animation-fill-mode: forwards;
}

.delay_first
{
	animation-delay: 0.4s;
}

.delay_second
{
	animation-delay: 0.8s;
}

.delay_third
{
	animation-delay: 1.2s;
}



/* COMMON STYLES */

*[id^="bff"]
{
	pointer-events: none;
}

#content
{
	position: absolute;
	width: 100%;
	max-width: 2400px;
	height: 100%;
	pointer-events: auto;
}

.desktop_only
{
	display: block;
}

.mobile_only
{
	display: none;
}

.folio, .header, .footer
{
	width: 100%;
	padding: 0 3%;
}

.header
{
	height: 7.5rem;
	display: flex;
	align-items: center;
}

.header img
{
	width: 2.25rem;
	margin-right: 0.625rem;
}

.header p, .footer p
{
	font-size: 0.875rem;
}

.header p:last-child
{
	margin-left: auto;
}

.footer
{
	position: absolute;
	bottom: 2.5rem;
}

.bg_white
{
	background: var(--white72);
}

.bg_black
{
	background: var(--black);
}

.full
{
	position: relative;
	width: 100%;
	height: 100%;
}

.reveal /* fades in the layer on load */
{
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out; /* Add transition for visibility */
}

.reveal.opened
{
	opacity: 1;
	visibility: visible;
}

.reveal.closed
{
	opacity: 0;
	visibility: hidden;
}

.centy
{
	text-align: center;
}

.lefty
{
	text-align: left;
}

.righty
{
	text-align: right;
}

.longname
{
	display: inline;
}

.shortname
{
	display: none;
}

p.long
{
	display: block;
}

p.short, p.shortest
{
	display: none;
}

.caption
{
	font-size: 0.875rem;
	margin-top: 0.625rem;
}


/* SNAP STYLES */

*[class^="snap_"]
{
	position: absolute;
}

.snap_center
{
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.snap_top
{
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

.snap_under_center
{
	top: 50%;
	left: 50%;
	transform: translateX(-50%);
}




/* HOME PAGE SPECIFIC STYLES */

#bff-home
{
	opacity: 0;
	transition: opacity 0.4s ease;
}

.byline
{
	height: 2.5rem;
	margin-bottom: 2.5rem;
}

.byline p
{
	line-height: 120%;
	font-size: 1.5rem;
	letter-spacing: -0.02em;
	opacity: 0.24;
}

.bio
{
	display: flex;
	flex-direction: column;
	row-gap: 1.25rem;
}

.bio p
{
	width: 100%;
	font-size: 1.5rem;
	text-wrap: nowrap;
	text-align: center;
}

.bio img /* miranda and jose pic */
{
	width: 100%;
}



/* PROJECT STYLES */

.projects
{
	width: 100%;
	display: flex;
	column-gap: 3.2%;
	row-gap: 5rem;
}

.column
{
	display: flex;
	flex-direction: column; /* default up until 2200px */
	width: 48.4%;
	row-gap: 5rem;
}

.quarter
{
	width: 100%;
}


/* thumbs */

.thumb
{
	width: 100%;
}

.thumb:not(:first-child)
{
	margin-top: 5rem;
}

.thumb img
{
	width: 100%;
}

.thumb a
{
	text-decoration: none;
}

.thumb hr
{
	margin-bottom: 0.625rem;
}

.info
{
	display: flex;
	align-items: start;
	margin-bottom: 0.625rem;
}

.info div
{
	width: 50%;
}

.info div:first-child
{
	width: 44%;
}

.info div:last-child
{
	width: 56%;
}

.info p
{
	font-size: 1.5rem;
	line-height: 100%;
	letter-spacing: -0.02em;
	text-wrap: nowrap;
}

.info p:not(:first-child)
{
	margin-top: 0.3125rem;
}

.light
{
	opacity: 0.48;
}

.lightest
{
	opacity: 0.24;
}