@charset "utf-8";
/*


	Mobile devices in portrait orientation sorted by
	  CSS Viewport Width descending, 
	  Pixel Ratio descending, 
	  Release Date descending.


	Device         Released     Viewport     Rat   Pixels         PPI
	─────────────────────────────────────────────────────────────────
	iPhone XS Max  2018 Sep     414 × 896    3     1242 × 2688    458
	iPhone XR      2018 Oct     414 × 896    2      828 × 1792    326
	iPhone 8+      2017 Sep     414 × 736    3~    1080 × 1920    401
	iPhone 7+      2016 Sep     414 × 736    3~    1080 × 1920    401
	iPhone 6s+     2015 Sep     414 × 736    3~    1080 × 1920    401
	iPhone 6+      2014 Sep     414 × 736    3~    1080 × 1920    401
	Pixel 3 XL     2018 Oct     412 × 847    4~    1440 × 2960    523
	Pixel 3        2018 Oct     412 × 824    3~    1080 × 2160    443
	Pixel 2 XL     2017 Oct     412 × 732    4~    1440 × 2880    538
	Pixel 1 XL     2016 Oct     412 × 732    4~    1440 × 2560    534
	Pixel 2        2017 Oct     412 × 732    3~    1080 × 1920    441
	Pixel 1        2016 Oct     412 × 732    3~    1080 × 1920    441
	iPhone Xs      2018 Sep     375 × 812    3     1125 × 2436    458
	iPhone X       2017 Nov     375 × 812    3     1125 × 2436    458
	iPhone 8       2017 Sep     375 × 667    2      750 × 1334    326
	iPhone 7       2016 Sep     375 × 667    2      750 × 1334    326
	iPhone 6s      2015 Sep     375 × 667    2      750 × 1334    326
	iPhone 6       2014 Sep     375 × 667    2      750 × 1334    326
	iPhone SE      2016 Mar     320 × 568    2      640 × 1136    326


	https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
	https://mediag.com/blog/popular-screen-resolutions-designing-for-all/




	color: #191919;		 10%
	color: #333333;		 20%
	color: #4C4C4C;		 30%
	color: #666666;		 40%
	color: #7F7F7F;		 50%
	color: #999999;		 60%
	color: #B2B2B2;		 70%
	color: #CCCCCC;		 80%
	color: #E5E5E5;		 90%
	color: #FFFFFF;		100%


*/






    /*************/
   /*           */
  /*   Fonts   */
 /*           */
/*************/


@font-face {

	font-family: 'David Libre';
	font-style: normal;
	font-weight: 400;
	src: local( 'David Libre' ), 
	     local( 'DavidLibre-Regular' ), 
	     url( '../media/fonts/DavidLibre-400-Latin.woff2' ) format( 'woff2' );
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {

	font-family: 'David Libre';
	font-style: normal;
	font-weight: 500;
	src: local( 'David Libre Medium' ), 
	     local( 'DavidLibre-Medium' ), 
	     url( '../media/fonts/DavidLibre-500-Latin.woff2' ) format( 'woff2' );
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {

	font-family: 'Inter';
	font-style:  normal;
	font-weight: 300;
	src: local( 'Inter Light' ), 
	     local( 'Inter-Light' ),  
	     url( '../media/fonts/Inter-Light-BETA.woff2' ) format( 'woff2' );
}
@font-face {

	font-family: 'Inter';
	font-style:  normal;
	font-weight: 400;
	src: local( 'Inter' ), 
	     local( 'Inter-Regular' ),  
	     url( '../media/fonts/Inter-Regular.woff2' ) format( 'woff2' );
}
@font-face {

	font-family: 'Inter';
	font-style:  normal;
	font-weight: 700;
	src: local( 'Inter Bold' ), 
	     local( 'Inter-Bold' ),
	     url( '../media/fonts/Inter-Bold.woff2' ) format( 'woff2' );
}
@font-face {

	font-family: 'Inter';
	font-style:  normal;
	font-weight: 900;
	src: local( 'Inter Black' ), 
	     local( 'Inter-Black' ),
	     url( '../media/fonts/Inter-Black.woff2' ) format( 'woff2' );
}




    /*****************/
   /*               */
  /*   Variables   */
 /*               */
/*****************/


:root {


	/*  Grayscale  */

	--color-white:     #FFFFFF;
	--color-chalk:     #F9F9F9;
	--color-newsprint: #F3F3F3;
	--color-titanium:  #CCCCCC;
	--color-slate:     #777777;
	--color-charcoal:  #333333;
	--color-black:     #000000;


	/*  Fonts  */

	--font-family-serif:   'David Libre', 'Georgia', serif;
	--font-family-sans:    'Inter', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
	--font-family-mono:    'Roboto Mono', 'Source Code Pro', 'Menlo', 'Courier New', monospace;
}




    /***************/
   /*             */
  /*   General   */
 /*             */
/***************/


* {

	box-sizing: border-box;
	margin:  0;
	border:  0;
	padding: 0;
}
::-moz-selection {

	background: #FFF;
	color: #000;
}
::selection { 

	background: #FFF;
	color: #000;
}
html, body {

	width:  100%;
	height: 100%;
}
body {

	/*background-color: #191919;*/
	background-color: #333333;
	/*background-color: #000;*/
	color: #000;
	font-family: 'Inter', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
	font-weight: 300;
	font-size:   14px;
	line-height: 24px;
}
h1, h2, h3 {

	font-family: 'Inter', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
	font-weight: 700;
	font-size: 24px;
}
h2 {

	font-weight: 900;
}
p + p {

	text-indent: 24px;
}
hr {

	height: 12px;
	visibility: hidden;
}
li {

	list-style: none;
}
small {

	font-size: 0.8em;
	letter-spacing: 0.02em;
}






    /**************/
   /*            */
  /*   Themes   */
 /*            */
/**************/


a {

	border-bottom: 1px solid rgba( 0, 0, 0, 0.2 );
	color: #000;
	text-decoration: none;
}
a:hover {

	border-bottom-color: rgba( 255, 255, 255, 1 );
	color: rgba( 255, 255, 255, 1 );
}
.theme-light {

	background-color: #E5E5E5;
}
.theme-dark {

	/*background-color: #191919;*/
	background-color: #333333;
	background: linear-gradient(

		180deg,
		#333333   0%, 
		#2C2C2C 100% 
	);
	color: rgba( 255, 255, 255, 0.3 );
}
.theme-dark a {

	border-bottom-color: rgba( 255, 255, 255, 0.1 );
	color: rgba( 255, 255, 255, 0.3 );
}
.theme-dark a:hover {

	border-bottom-color: rgba( 255, 255, 255, 1 );
	color: rgba( 255, 255, 255, 1 );
	/*animation-name: theme-dark-linkblink;*/
}
.theme-medium {

	/*background-color: #FC6953;*/
	/*background-color: #FA0;*/
	/*background-color: #999;*/
	background: rgb( 204, 204, 204 );
	background: linear-gradient(

		180deg,
		rgb( 204, 204, 204 )  20%, 
		rgb( 160, 160, 160 ) 100% 
	);
	/*background-color: #57D1A9;*/
}
ul {

	margin: 0 auto;
	/*max-width: 1080px;*/
	padding: 0;
}




    /**************/
   /*            */
  /*   Header   */
 /*            */
/**************/


header {

	position: fixed;
	z-index: 90;
	top:      0;
	right:    0;
	left:     0;
	height:  96px;
	padding: 24px 0 0 0;
	text-align: center;	
	background-position: center 0;

	/*background-color: rgba( 25, 25, 25, 0.5 );*/
	/*backdrop-filter: blur( 8px );*/
	/*backdrop-filter: blur( 16px );*/
}
header h1 {

	margin-bottom: 10px;
	color: #FFF;
	font-size:   32px;
	line-height: 48px;
	font-weight: 400;
}
.stewart-social {

	position: absolute;
	top: 30px;
	left: calc( 50% + 160px );
	width: 320px;
	text-align: center;
	transition: opacity 0.5s ease-in-out;
	line-height: 18px;
}
@media( max-width: 960px ){

	.stewart-social {

		opacity: 0;
	}
}
a.badge {

	display: inline-block;
	margin:  0 0 6px 0;
	padding: 4px 4px 0 4px;
	text-align: center;
	text-decoration: none;
	border-bottom: none;
}
a.badge:before {

	border-radius: 4px;
}
a[href].badge:after {

	border-bottom: none;
}
a.badge svg {
	
	width:  22px;
	height: 22px;
	fill: #FFF;
}
a.badge:hover svg {

	/*animation-duration: 0.1s;*/
	/*animation-name: theme-dark-linkblink;*/
	fill: #FFF;
}






    /*************/
   /*           */
  /*   Cards   */
 /*           */
/*************/


/*

	Compact screen: 320 × 568 CSS pixels
	Tile image sizes:
	        W ×    H
	@1x:  256 ×  256
	@2x:  512 ×  512   
	@3x:  768 ×  768   
	@4x: 1024 × 1024

*/


ul.cards {

	margin: 0 auto;
}
ul.cards li {

	position: relative;
	display: inline-block;
	margin: 0;
	width:  100vw;
	height: 200vw;
	text-align: center;
	vertical-align: top;
}
ul.cards li h3 {

	padding: 32px 24px 12px 24px;
	padding: 32px 8% 8px 8%;
	color: #FFF;
	font-weight: 700;
	text-shadow: 0 1px 4px rgba( 0, 0, 0, 0.3 );
}
ul.cards li p {

	padding: 4px 24px 16px 24px;
	padding: 4px 8% 16px 8%;
}
ul.cards li .hidden {

	display: none;
}
.card {

	position: absolute;
	top: 0;
}
.card .front,
.card .back {

	width:  100vw;
	height: 100vw;	
}
.card .front {

	box-shadow: 0 1px 12px rgba( 0, 0, 0, 0.5 );
}
.card .front img {

	width:  100vw;
	height: 100vw;
}
a.launch-button {

	display: inline-block;
	border: none;
	border-radius: 32px;
	background: #36F;
	background: linear-gradient(

		180deg,
		#36F  50%, 
		#25E 100% 
	);
	padding: 8px 24px;
	color: #FFF;
	/*font-weight: bold;*/
	text-align: center;
	text-shadow: 0 -0.5px 1px rgba( 0, 0, 0, 0.3 );
	box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 );
}
a.launch-button:hover {

	border: none;
	background: #39F;
	background: linear-gradient(

		180deg,
		#39F  50%, 
		#28E 100% 
	);
}
@media screen and ( min-width: 480px ){

	ul.cards li {

		margin: 16px;
		width:  256px;
		height: 256px;
	}
	ul.cards li .hidden {

		display: block;
		padding: 32px;
	}
	ul.cards li p {

		font-size:   12px;
		line-height: 18px;
		color: rgba( 255, 255, 255, 0.5 );
	}
	.card {

		width:  256px;
		height: 256px;
		transform: 
			perspective( 1024px )
			translate3d( 0, 0, 0 )
			rotateY( 0turn );
		transition: transform 2s cubic-bezier( 0.2, 0, 0.2, 1 );


		/*

		The perspective-origin and perspective properties 
		are attached to the parent of a child transformed in 3-dimensional space, 
		unlike the perspective() transform function 
		which is placed on the element being transformed.
		
		*/
		
		/*perspective-origin: center;*/
		/*perspective: none;*/
		transform-style: preserve-3d;
	}
	.card .front,
	.card .back {

		position: absolute;
		border-radius: 8px;
		width:  256px;
		height: 256px;
		transform: 
			/*perspective( 1024px )*/
			translate3d( 0, 0, 0 )
			rotateY( 0turn );
		overflow: hidden;
		box-shadow: 0 6px 12px rgba( 0, 0, 0, 0.3 );
	}
	.card .front img {

		width:  256px;
		height: 256px;
	}
	.card .back {

		/*background-color: rgba( 47, 47, 47, 0.95 );*/
		background-color: rgba( 31, 31, 31, 0.95 );
		transform: 
			/*perspective( 1024px )*/
			translate3d( 0, 0, -0.1px )
			rotateY( 0.5turn );	

		backface-visibility: hidden;
		/*backdrop-filter: blur( 8px );*/
	}
	ul.cards li:hover .card {

		transform: 
			perspective( 1024px )
			translate3d( 0, 0, 0 )
			rotateY( -0.5turn );
		transition: transform 0.3s ease-out;
	}
}





    /****************/
   /*              */
  /*   SECTIONS   */
 /*              */
/****************/


section {

	position: relative;
	padding: 72px 0 96px 0;
	text-align: center;
}
.anchor {

	position: relative;
	top:  -71px;/*  One extra pixel less for Safari  */
	width: 50%;
	height: 0;
}
section.bumper {

	height: 64px;
	padding: 0;
}
@media screen and ( min-width: 480px ){

	section.bumper {

		height: 96px;
	}
}




section.summary {

	color: #FFF;
	font-family: var( --font-family-serif );
	font-size:   32px;
	line-height: 48px;
}




    /************/
   /*          */
  /*   Work   */
 /*          */
/************/


section.work {

	padding: 0 0 128px 0;
}
section.work h2 {

	position: sticky;
	top: 72px;
	z-index: 100;
	padding-bottom: 64px;
}
section.work h2 svg {

	width: auto;
	height: 56px;
	fill: rgba( 255, 255, 255, 0.9 );
}
section.work h3 {

	padding-bottom: 32px;
}
section.work h3 a, 
section.work h3 a:hover {

	border: none;
	color: #FFF;
}
section.work ul {

	max-width: 1152px;/*  ( 256 + 32 ) × 4  */
}
section.work ul + p {

	margin-top: 16px;
	padding: 0 8%;
}
@media( min-width: 480px ){

	section.work h2 {

		display: none;
	}
}






    /*************/
   /*           */
  /*   About   */
 /*           */
/*************/


section.about {

	padding: 72px 0 96px 0;
	font-family: 'David Libre', Georgia, serif;
	font-size:   14px;
	line-height: 24px;
}
section.about h2 {

	margin-bottom: 16px;
	padding-right: 16px;
	text-align: center;
}
section.about h2 svg {

	width: auto;
	height: 48px;
}
section.about div {

	margin: 0 auto;
	width: 332px;
	text-align: left;
	font-weight: normal;
}
section.about p {

	position: relative;
	left: 6px;
}
section.about strong {

	font-weight: 500;
}
section.about hr {

	height: 12px;
}
#yalekern {

	position: relative;
	margin-right: -0.07em;
}
@media( min-width: 480px ){

	section.about {

		--factor:       calc( 1 / 480 * 100vw );
		padding-top:    calc( 72 * var( --factor ));
		padding-bottom: calc( 96 * var( --factor ));
		font-size:      calc( 14 * var( --factor ));
		line-height:    calc( 24 * var( --factor ));
	}
	section.about div {

		width: calc( 332 * var( --factor ));
	}
	section.about h2 {

		font-size:     calc( 24 * var( --factor ));
		margin-bottom: calc( 16 * var( --factor ));
	}
	section.about h2 svg {

		width:  auto;
		height: calc( 48 * var( --factor ));
	}
	section.about hr {

		height: calc( 12 * var( --factor ));
	}
	section.about p + p {

		text-indent: calc( 24 * var( --factor ));
	}
}
@media( min-width: 960px ){

	section.about {

		--factor: calc( 960px / 480 );
	}
}






    /*************/
   /*           */
  /*   Press   */
 /*           */
/*************/


section.press {

	padding: 96px 0 144px 0;
}
section.press ul {

	max-width:  864px;/*  ( 256 + 32 ) × 3  */	
}
section.press h2 {

	position: sticky;
	top: 72px;
	z-index: 100;
	margin-bottom: 32px;
	color: rgba( 255, 255, 255, 0.7 );
}
section.press h2 svg {

	width: auto;
	height: 96px;
	fill: rgba( 255, 255, 255, 0.9 );
}
section.press h3 {

	color: #FFF;
	font-weight: 700;
}
section.press h3 a, section.press h3 a:hover {

	border: none;
	color: #FFF;
}
@media( min-width: 480px ){

	section.press {

		--factor:       calc( 1 / 480 * 100vw );
		/*padding-top:    calc( 72 * var( --factor ));
		padding-bottom: calc( 96 * var( --factor ));
		font-size:      calc( 14 * var( --factor ));
		line-height:    calc( 24 * var( --factor ));*/
	}
	section.press h2 {

		/*font-size:     calc( 14 * var( --factor ));*/
		/*margin-bottom: calc( 24 * var( --factor ));*/
	}
	section.press h2 svg {

		/*width:  auto;
		height: calc( 64 * var( --factor ));*/
	}
}




    /************************/
   /*                      */
  /*   Curriculum Vitae   */
 /*                      */
/************************/


section.cv {

	padding: 144px 0 144px 0;
	text-align: center;
	font-size:   10px !important;
	line-height: 16px !important;
}
/*

	  360px column 1 width
	  360px column 2 width
	+  48px middle gutter
	+  24px left gutter
	+  24px right gutter
	=======
	  804px minimum required for double column.

*/
@media( min-width: 804px){

	#cv-column-1, #cv-column-2 {
	
		display: inline-block;
		vertical-align: top;
		margin: 0 48px 0 0;
	}
	#cv-column-2 {
		
		margin-right: 0;
	}
}
section.cv div.cv-category {

	margin: auto;
	margin-bottom: 36px;
	text-align: left;
}
section.cv div.entry {

	margin: 0 auto;
	display: grid;
	grid-template-columns: 
		64px [ column-mark ]
		auto [ column-context ];
	grid-gap: 8px;
	grid-auto-rows: auto;
	width: 360px;
}
section.cv div.entry + div.entry {

	padding-top: 16px;
}
section.cv div.mark {

	grid-column: 1;
}
section.cv div.entry h2, section.cv div.context {

	grid-column: 2;
}
section.cv h2 {

	height: 28px;
	font-size: 18px;
}
section.cv div.mark {

	position: relative;
	vertical-align: top;
	text-align: center;
	font-size: 14px;
}
section.cv div.mark p {

	position: relative;
	top: -2px;
	font-weight: 400;
	color: rgba( 0, 0, 0, 0.6 );
}
section.cv div.mark svg {

	width:  50px;
	height: 50px;
	fill: rgba( 0, 0, 0, 0.6 );
	position: absolute;
	top: -19px;
	left:  7px;
}
section.cv div.context {

	vertical-align: top;
	font-weight: 300;
}
section.cv div.role + div.role {

	/*padding-top: 16px;*/
}
section.cv div.role div.title {

	font-weight: 700;
}
section.cv div.where-when {

	font-weight: 400;
}
section.cv div.context p {

	color: rgba( 0, 0, 0, 0.8 );
}






    /***************/
   /*             */
  /*   Contact   */
 /*             */
/***************/


footer {

	padding: 48px 0 32px 0;
	text-align: center;
}
footer.theme-dark {

	background-color: #191919;
	background: linear-gradient(

		180deg,
		#191919   0%, 
		#000000 100% 
	);
}
footer h2 {

	font-size: 22px;
	font-weight: 400;
}
footer h2 svg {

	width: auto;
	height: 56px;
	fill: rgba( 255, 255, 255, 0.3 );
}
footer a.badge {

	padding: 6px 6px 0 6px;	
}
footer a.badge svg {

	width:  32px;
	height: 32px;
}
#s-mark {

	margin: 64px 0 0 0;
	width:  128px;
	height: 128px;
}
.notices {

	margin-top: 96px;
	padding: 0 8%;
}
.notices, .notices a {

	color: rgba( 255, 255, 255, 0.2 );
}